一、jQuery简介
1. 介绍
jQuery是JS的工具库，对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。
中文网址：jquery123.com
2. 使用
1）引入
先引入jquery文件，才能使用jquery语法
2）工厂函数 - $()
"$()"函数用于获取元素节点，创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例 :
<!--引入jquery文件-->
<script src="jquery-1.11.3.js"></script>
<body>
<h1 id="d1" class="c1"></h1>
<p></p>
</body>
//$()获取元素节点,需传入字符串的选择器
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
3）原生JS对象与jQuery对象
原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
1. 原生JS转换jQuery对象
$(原生对象)，返回 jQuery 对象
2. jQuery对象转换原生JS对象
方法一 : 根据下标取元素,取出即为原生对象
var div = $("div")[0];
方法二 : 使用jQuery的get(index)取原生对象
var div2 = $("div").get(0);
1 <!--引入jquery文件--> 2 <script src="jquery-1.11.3.js"></script> 3 <script> 4 window.onload = function(){ 5 //使用jquery获取元素节点 6 //$('选择器') 7 console.log($('h1'));//所有h1元素节点全打出来 8 $('h1').html('Python');//所有h1元素节点修改为Python 9 console.log($('h1'[0]));//获取原生js对象 <h1>Python</h1> 10 //原生对象调用原生的方法 11 $('h1')[0].innerHTML = 'hello'; //第一个h1元素节点修改为hello 12 console.log($('h1')[0]) 13 //<h1>jq对象调用jq方法</h1> 14 //eq(index)返回指定下标对应的jq对象 15 console.log($('h1').eq(0)); 16 //<h1>jq对象调用jq方法</h1> 17 $('h1').eq(0).html('jq对象调用jq方法')// 18 console.log(#d1'); //<h1 id="d1">Python</h1> 19 //原生对象转换jquery对象,$(原生)封装 20 $('#d1').html('包装成jquery对象'); 21 console.log('#d1') //<h1 id="d1">包装成jquery对象</h1> 22 } 23 </script> 24 <body> 25 <div> 26 <h1>python</h1> 27 </div> 28 <h1>jquery</h1> 29 <h1>jquery</h1> 30 <h1 id="d1">jquery</h1> 31 <h1>jquery</h1> 32 <h1>jquery</h1> 33 </body>
4）jQuery获取元素
jQuery通过选择器获取元素，$("选择器")
选择器分类 :
1.基础选择器
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
1 <!--引入jquery文件--> 2 <script src="jquery-1.11.3.js"></script> 3 <script> 4 window.onload = function(){ 5 //1.标签选择器 6 console.log($('h1').html()); //人生苦短(默认是第一个) 7 //2.id选择器 8 //css()操作行内样式 9 $('#d1').css('color','red'); 10 $('#d1').css('text-align','center'); //id=d1 居中红色 11 } 12 //3.class选择器 13 $('.c1').css('color','pink'); //.c1类字体粉色 14 //4.群组选择器 15 $('body,h1').css('margin','30'); 16 </script> 17 <body> 18 <h1 id="d1" class="c1">人生苦短</h1> 19 <h1 class="c1">我学Python</h1> 20 <div id="box"> 21 <span>div->span</span> 22 <p> 23 <span>p->span</span> 24 </p> 25 <b>测试文本</b> 26 <span>div->span</span> 27 <span>div->span</span> 28 </div> 29 </body>
2.层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p") 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素
1 <!--引入jquery文件--> 2 <script src="jquery-1.11.3.js"></script> 3 <script> 4 window.onload = function(){ 5 //1.后代选择器 6 $('#box span').css('color','red'); 7 //2.子代选择器 8 $('#box>span').css('background','green'); 9 //3.相邻兄弟选择器 10 $('#box p+span').css('border','2px solid black'); 11 $('h1+div').css('border','2px solid black'); 12 //4.通用选择器 13 $('#box p~span').css('font-size','32px'); 14 $('h1:not(#d1)').css('color','#ff0') 15 } 16 </script> 17 <body> 18 <h1 id="d1" class="c1">人生苦短</h1> 19 <h1 class="c1">我学Python</h1> 20 <div id="box"> 21 <span>div->span</span> 22 <p> 23 <span>p->span</span> 24 </p> 25 <b>测试文本</b> 26 <span>div->span</span> 27 <span>div->span</span> 28 </div> 29 </body>
3.过滤选择器
需要结合其他选择器使用。
| :first | 匹配第一个元素 例:$("p:first") |
| :last | 匹配最后一个元素 例:$("p:last") |
| :odd | 匹配奇数下标对应的元素 |
| :even | 匹配偶数下标对应的元素 |
| :eq(index) | 匹配指定下标的元素 |
| :lt(index) | 匹配下标小于index的元素 |
| :gt(index) | 匹配下标大于index的元素 |
| :not(选择器) | 否定筛选,除()中选择器外,其他元素 |
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <!--引入jquery文件--> 5 <script src="jquery-1.11.3.js"></script> 6 </head> 7 <body> 8 <h1 id="d1">过滤选择器</h1> 9 <h1>过滤选择器</h1> 10 <h1>过滤选择器</h1> 11 <h1 class="c1">过滤选择器</h1> 12 <h1 class="c1">过滤选择器</h1> 13 <h1>过滤选择器</h1> 14 <button id="btn1">:first</button> 15 <button id="btn2">:last</button> 16 <button id="btn3">:odd</button> 17 <button id="btn4">:even</button> 18 <button id="btn5">:eq()</button> 19 <button id="btn6">:lt()</button> 20 <button id="btn7">:gt()</button> 21 <button id="btn8">:not()</button> 22 <script> 23 btn1.onclick = function(){ 24 $('h1:first').css('color','red'); 25 } 26 btn2.onclick = function(){ 27 $('h1:last').css('color','green'); 28 } 29 btn3.onclick = function(){ 30 $('h1:odd').css('color','pink'); 31 } 32 btn4.onclick = function(){ 33 $('h1:even').css('color','blue'); 34 } 35 btn5.onclick = function(){ 36 $('h1:eq(3)').css('color','#fa3377'); 37 } 38 btn6.onclick = function(){ 39 $('h1:lt(3)').css('color','#33fa77'); 40 } 41 btn7.onclick = function(){ 42 $('h1:gt(3)').css('color','#3377fa'); 43 } 44 btn8.onclick = function(){ 45 //匹配下标部位3的所有h1 46 //$('h1:not(:eq(3))').css('color','#999'); 47 $('h1:not(#d1,.c1)').css('color','#ff0') 48 } 49 </script> 50 </body>
4.属性选择器
属性选择器以[ ]为标志.
| [attrName] | 匹配包含指定属性的元素 |
| [attrName=value]/[attrName="value"] | 匹配属性名=属性值的元素 |
| [attrName^=value] | 匹配属性值以指定字符开头的元素 |
| [attrName$=value] | 匹配属性值以指定字符结尾的元素 |
| [attrName*=value] | 匹配属性值包含指定字符的元素 |
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <!--引入jquery文件--> 5 <script src="jquery-1.11.3.js"></script> 6 </head> 7 <body> 8 <h1>我学Python</h1> 9 <h1 id="d1">人生苦短</h1> 10 <h1 id="d2">从入门到放弃</h1> 11 <h1 id="c3">从放弃到绝望</h1> 12 <h1 id="c4">从放弃到再放弃</h1> 13 <ul> 14 <li>列表项</li> 15 <li>列表项</li> 16 <li>列表项</li> 17 <li>列表项</li> 18 </ul> 19 <ul> 20 <li>列表项</li> 21 <li>列表项</li> 22 <li>列表项</li> 23 <li>列表项</li> 24 <a href=""></a> 25 </ul> 26 <script> 27 console.log($('[id]')); 28 console.log($("[id='d1']")); 29 //以d开头的元素 30 console.log($("[id^=d]")); 31 //以1结尾的元素 32 console.log($("[id$=1]")); 33 //id属性值包含‘d’ 34 console.log($("[id*=c]")); 35 36 //子元素过滤选择器 37 $('li:first').css('color','red'); 38 $('li:first-child').css('background','green'); 39 $('li:last-child').css('background','orange'); 40 $('li:nth-child(2)').css('text-align','center'); 41 </script> 42 </body>
5.子元素过滤选择器
| :first-child | 匹配第一个子元素 |
| :last-child | 匹配最后一个子元素 |
| :nth-child(n) | 匹配第n个子元素(n从1开始计数) |
5）操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性
6）操作标签属性
1. attr("attrName","value")
设置或读取标签属性
2. prop("attrName","value")
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
3. removeAttr("attrName")
移除指定属性
7）操作标签样式
1. 为元素添加id/class属性,对应选择器样式
2. 针对类选择器,提供操作class属性值的方法
addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
3. 操作行内样式
css("属性名","属性值") //设置行内样
css(JSON对象) //设置一组CSS样式
JSON对象:常用数据传输格式
语法 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
8）根据层级结构获取元素
1. parent()
返回父元素
2. parents('selector')
返回满足选择器的祖先元素
3. children()/children("selector")
返回所有直接子元素/返回满足选择器的直接子元素
4. find("selector")
返回所有的后代元素(包含直接与间接)
5. next()/next("selector")
返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器
6. prev()/prev("selector")
返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器
7. siblings()/siblings("selector")
返回所有的兄弟元素/满足选择器的所有兄弟元素
9）元素的创建,添加,删除
1. 创建
使用$("标签语法")，返回创建好的元素
var div = $("<div></div>"); //创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>"); //创建的同时设置内容，属性和样式
2. 添加至页面
1）作为子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作为第一个子元素添加至$obj中
2）作为兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素
$obj.before(newObj); //在$obj的前面添加兄弟元素
3）移除元素
$obj.remove(); //移除$obj
10）jQuery事件处理
1. 文档加载完毕
原生JS 方法：window.onload
jQuery:
//语法一 $(document).ready(function (){ //文档加载完毕后执行 }) //语法二 $().ready(function (){ //文档加载完毕后执行 }) //语法三 $(function(){ //文档加载完毕后执行 })
区别：原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行
2. 事件绑定方式
事件名称省略 on 前缀
//on("事件名称"，function) $("div").on("click",function(){}); //bind("事件名称",function) $("div").bind("click",function(){}); //事件名作为方法名 $("div").click(function(){});
3. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。