jQuery基础 - 常用基本属性
生活随笔
收集整理的這篇文章主要介紹了
jQuery基础 - 常用基本属性
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
jQuery簡介
jQuery 是一個 JavaScript 庫，極大地簡化了 JavaScript 編程
jQuery 對象是通過jQuery包裝DOM對象后產(chǎn)生的對象，jQuery對象是jQuery獨有的，如果一個對象就是jQuery對象，那么它就可以使用jQuery里的方法
jQuery 內(nèi)部實際使用的 JavaScript 的 XMLHttpRequest 對象
基本語法
$(選擇器).動作()jQuery 對比 與 JavaScript 對比
| jQuery | $("#test").html() | 獲取 ID 為 test的元素內(nèi) html代碼。其中html()是 jQuery 中的方法 |
| JavaScript | document.getElementById("test").innerHTML | 獲取 ID 為 test的元素內(nèi) html代碼 |
jQuery 基本示例
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body><div>hello jQuery</div><script>jQuery("div").css("color","red") </script> </body> </html>標簽屬性操作
| $("標簽").html() | 標簽HTML內(nèi)容 |
| $("標簽").attr("標簽屬性") | 獲取標簽屬性(屬性值) |
| $("標簽").removeAttr("標簽屬性") | 移除指定標簽屬性 |
| $("標簽").attr("標簽屬性","增加/變更屬性") | 增加或變更屬性 |
| $("標簽").prop("標簽屬性") | 獲取標簽屬性(布爾值) |
| $("標簽").removeProp("標簽屬性") | 移除指定標簽屬性 |
| $("標簽").prop("標簽屬性","增加/變更屬性") | 獲取標簽屬性,并新增或變更屬性 |
| $(this) | 獲取的標簽本身 |
標簽位置和尺寸
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>*{margin: 0px;}.outer{position: absolute;left:50px;top:10px;background-color: yellow;height: 300px;width: 400px;}.con{position: relative; background-color: pink;height:200px;width:300px;left:20px;top:30px;padding-top:1px;padding-left:2px;margin: 3px auto auto 4px;} </style> <body><div class="outer"><p class="con"></p></div> </body> <script>//獲取位置console.log($(".con").position().left); //相對于上層標簽的偏移量console.log($(".con").offset().left); //相對于視圖標簽的偏移量//獲取高度console.log($(".con").height()); //獲取標簽高度console.log($(".con").innerHeight()); //獲取內(nèi)部區(qū)域高度console.log($(".con").outerHeight(true)); //獲取標簽高度(設(shè)置為 true 時，計算邊距在內(nèi))//獲取寬度console.log($(".con").width()); //獲取標簽寬度console.log($(".con").innerWidth()); //獲取內(nèi)部區(qū)域段杜console.log($(".con").outerWidth(true)); //獲取標簽寬度(設(shè)置為 true 時，計算邊距在內(nèi))</script> </html>jQuery 綁定事件
為每個匹配元素的特定事件綁定事件處理函數(shù)，可以同時綁定多個事件類型
- 和 js 中的 onclick 綁定方式不同，但因為jQuery本身是基于js寫的運行庫，所以onclick綁定方式也可以在jQuery中使用
this 使用
- onclick(this)，獲取當前標簽，在函數(shù)中js用this，jQuery用$(this)
- 其它綁定方式不用在方法中傳遞this參數(shù)，可以直接使用this
JavaScript綁定方式：
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>div {height: 200px;width: 200px;background-color: green;} </style> <body><button onclick="showtime()">這是一個測試標簽，點擊觸發(fā)事件</button> <script>function showtime() //定義方法{alert("hello world") //事件方法內(nèi)容};</script> </body> </html>jQuery綁定方法一：
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>div {height: 200px;width: 200px;background-color: green;} </style> <body><button>這是一個測試標簽，點擊觸發(fā)事件</button> <script>$("button").click(function () //選定標簽綁定事件方法{alert("hello world") //事件方法內(nèi)容alert($(this).html()) //標簽本身的HTML內(nèi)容});</script> </body> </html>jQuery綁定方法二：
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>div {height: 200px;width: 200px;background-color: green;} </style> <body><button>這是一個測試標簽，點擊觸發(fā)事件</button> <script>$("button").bind("click",function () //選定標簽綁定事件方法{alert("hello world"); //事件方法內(nèi)容alert($(this).html()) //標簽本身的HTML內(nèi)容});//$("button").unbind("click"); //解除綁定</script> </body> </html>jQuery綁定方法三：
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>div {height: 200px;width: 200px;background-color: green;} </style> <body><button>這是一個測試標簽，點擊觸發(fā)事件</button> <script>$("button").on("click",function () //選定標簽綁定事件方法,提供綁定事件處理程序所需的所有功能{alert("hello world"); //事件方法內(nèi)容alert($(this).html()) //標簽本身的HTML內(nèi)容});//$("button").off("click"); //刪除事件綁定</script> </body> </html>進度條控制
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>body{height: 2000px;}.Go_Top{position: fixed;height: 50px;width: 100px; bottom: 50px;right: 50px;background-color: #ccc;text-align: center;line-height: 50px;} </style> <body><div class="Go_Top" onclick="returnTop()">返回頂部</div><script>function returnTop() {$(window).scrollTop(0) //滾動條與視窗間距為0，即窗口返回頂部}</script> </body> </html>標簽內(nèi)容操作
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body><div id="div_sty"><div>測試標簽1</div><p>測試標簽2</p></div> <script>console.log($("#div_sty").html()); //獲取標簽內(nèi)容(包含子標簽和標簽內(nèi)容)$("#div_sty").html("<h1>新標簽</h1>"); //修改標簽 </script> </body> </html>標簽文本操作
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body><div id="div_sty"><div>測試標簽1</div><p>測試標簽2</p></div> <script>console.log($("#div_sty").text()); //獲取標簽內(nèi)容(只含標簽里的內(nèi)容)$("#div_sty").text("新文本"); //修改標簽內(nèi)容 </script> </body> </html>表單標簽value值操作
非value固有屬性的標簽不生效
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body><input type="text" value="test"> <script>console.log($(":text").val()); //獲取標簽 value 屬性值$(":text").val("New_test"); //變更 value 屬性值 </script> </body> </html>form標簽內(nèi)容獲取
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body><form id="TestID">用戶<input name="user" type="text">密碼<input name="passwd" type="password"><div onclick="aaa()">點擊顯示獲取數(shù)據(jù)</div></form> <script> function aaa(){var data = $("#TestID").serialize();//獲取form中標簽內(nèi)容方法alert(data); } </script> </body> </html>jQuery遍歷
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body><div class="test">第一個標簽</div><p class="test">第二個標簽</p><strong class="test">第三個標簽</strong> <script>array=["a","b","c"];//循環(huán)遍歷-方式一$.each(array,function(x,y) {console.log(x); //遍歷值的下標序列號console.log(y); //遍歷的值})//循環(huán)遍歷-方式二$(".test").each(function(){console.log($(this)); //遍歷所有標簽}) </script></body> </html> 0 a 1 b 2 c [div.test] [p.test] [strong.test]jQuery標簽的增刪改
<html><head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><style>.div1 { width: 300px;height: 100%;color: #000;float: left;text-align: center;background-color: #FFCCCC; }div p { background-color: #fff;}</style> </head> <body> <div class="div1"> <h3>jQuery的增刪改查</h3> <button att="add">添加標簽</button> <button att="del">刪除標簽</button> <button att="replace">替換標簽</button> </div> <script>//添加節(jié)點標簽函數(shù)$("[att='add']").click(function(){var $ele=$("<p>"); //創(chuàng)建標簽,聲明變量為 ele$ele.html("新增的 p 標簽"); //設(shè)定新增標簽中元素$(".div1").append($ele); //把設(shè)定好的標簽和標簽內(nèi)元素添加到指定位置});//刪除節(jié)點標簽函數(shù)$("[att='del']").click(function(){$(".div1 > p").last().remove(); //選定要刪除的標簽進行刪除操作});//修改節(jié)點標簽函數(shù)$("[att='replace']").click(function(){$(".div1 > h3").replaceWith("<h2>替換后的新標題</h2>");}); </script></body> </html>jQuery類樣式的增刪改
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <style>.div_sty{color: red;}.New_sty{text-align: center;} </style> <body><div class="div_sty">測試 div 標簽</div> <script>$("div").addClass("New_sty"); //添加指定標簽類樣式$("div").removeClass("div_sty"); //刪除指定標簽類樣式$("div").css("backgroundColor","blue"); //修改指定標簽類樣式 </script> </body> </html>jQuery克隆標簽元素
一個布爾值（true 或者 false）指示事件處理函數(shù)是否會被復(fù)制。V1.5以上版本默認值是：false
<!DOCTYPE html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body> <div class="outer"><div><button onclick="add(this)">+</button><input type="text"></div> </div><script>//克隆元素function add(self) {var $clone_obj=$(self).parent().clone(true); //定義克隆元素$clone_obj.children("button").html("-").attr("onclick","remove_obj(this)"); //變更克隆元素子級內(nèi)容$(".outer").append($clone_obj); //添加克隆修改后的元素}//刪除元素function remove_obj(self) {$(self).parent().remove(); //刪除當前級父級標簽元素} </script> </body> </html>擴展方法
<!DOCTYPE html> <html> <head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> </head> <body> <script>var settings = { validate: false, a:1, b:"2" };var options = { validate: true, c: "3" };jQuery.extend(settings, options);console.log(settings) </script> </body> </html>轉(zhuǎn)載于:https://my.oschina.net/zhaojunhui/blog/1920115
總結(jié)
以上是生活随笔為你收集整理的jQuery基础 - 常用基本属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oralce 笔记
- 下一篇： win7右键在桌面上转圈圈的解决办法