jQuery
- 介绍
jQuery是一个JavaScript的库，通过封装原生的JavaScript，得到一整套定义好的方法，简化JS操作Write Less ，Do More - jQuery的功能和优势
- 简化DOM操作，像操作CSS一样去操作DOM
- 直接通过选择器设置元素样式
- 简化JS的代码操作（链式调用）
- 事件的处理更加容易
- 各种动画效果使用更加方便
- 让Ajax技术更完美
- 基本jQuery有大量方便的插件
- 自行扩展功能插件
- jQuery使用
- 引入jQuery文件
- 本地文件
<script src=" "></script> - 网络文件引入
<script src="url"></script>
注意：如果想使用jQuery语法操作JS，必须将jQuery引入放在JS代码之前
- 本地文件
- 引入jQuery文件
- jQuery 使用
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.-
jQuery 对象 -
jQuery/$
jQuery 对象是对DOM对象封装之后产生的对象
jQuery 对象只能操作jQuery提供的方法，DOM对象也只能操作原生JS提供的方法，不能混用 -
工厂函数 -
$()
如果想要获取元素对象，必须通过工厂函数
函数中可以传递参数：选择器/DOM 对象 -
jQuery 对象与DOM对象互相转换
- DOM转换为jQuery 对象
var h1 = document.getElementsByTagName('h1')[0] var $h1 = $(h1); - jQuery 转换为 DOM
var h1 = $h1[0]; var h1 = $h1.get(0);<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <!-- 引入jQuery文件 --> <script src="jquery-1.11.3.js"></script> </head> <body> <div id="main"> 这是id为main的div </div> <button onclick="getElem()">获取元素</button> <button onclick="domToJQ()">DOM -> jQuery</button> <button onclick="jqToDom()">jQuery -> DOM</button> </body> <script> //1.获取元素 function getElem(){ console.log($('#main')); //获取元素内容 $('main').html() console.log($('#main').html()); $('#main').html('动态设置的文本'); } //2. 转换操作 function domToJQ() { //1. 获取DOM对象 var div = document.getElementsByTagName('div')[0]; //2. 转换为JQ对象 var $div = $(div); $div.html('转换JQ对象成功'); console.log(div,$div); } function jqToDom(){ var div = $('#main')[0]; var div2 = $('#main').get(0); div.innerHTML = "转换DOM元素成功"; console.log(div,div2); } </script> </html>
- DOM转换为jQuery 对象
-
jQuery选择器
作用: 根据选择器获取页面中的元素，返回值都是由jQuery对象组成的数组
语法：$('选择器')
jquery的基础语法：$(selector).action()
- 基础选择器
- ID选择器
$('#id');返回值id属性值为指定id的元素对象 - 类选择器
$('.className');返回指定类名对象的元素 - 标签选择器
$('element');返回指定标签对应的元素 - 群组选择器
$('selector1,selector2,...');
- ID选择器
- 层级选择器
- 后代选择器
$('selector1 selector2');
- 子代选择器
$('selector1>selector2'); - 相邻兄弟选择器
$('selector1+selector2');匹配紧跟在selector1后满足selector2的元素 - 通用兄弟选择器
$('selector1~selector2');匹配selector1后所有满足selector2的元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <h1>登鹳雀楼</h1> <h2>王之涣</h2> <p id="p1">白日依山尽</p> <p class="c1">黄河入海流</p> <p>欲穷千里目</p> <p>更上一层楼</p> <hr> <div> <h1>登鹳雀楼</h1> <h2>王之涣</h2> <p id="p1">白日依山尽</p> <p class="c1">黄河入海流</p> <p>欲穷千里目</p> <p>更上一层楼</p> </div> </body> <script> //获取元素 console.log($('p')); //为元素添加样式 css('attrName','value') $('p').css('font-size','32px'); $('#p1').css("color","red"); $('.c1').css('color','orange'); $('h1,h2,p').css("text-align","center"); //层级选择器 $('body h1').css('color','red'); $('body>p').css('border','1px dashed green'); //相邻兄弟选择器 通用兄弟选择器 $('h1+p').css('background','pink'); //匹配紧跟在h1后面的兄弟元素p //$('h2+p').css('background','pink'); //匹配h1后面所有的兄弟元素p $('h1~p').css('background','pink'); </script> </html> - 后代选择器
- 基本过滤选择器
过滤选择器需要结合其他选择器一起使用:first
只匹配一组元素中的第一个元素
$(‘p:first’);:last
匹配一组元素中的最后一个元素
$(‘p:last’);:not
否定筛选，将满足selector选择器的元素都排除在外匹配剩余元素
$(’:not(p,h1)’);:odd
匹配偶数行对应的元素（奇数下标）:even
匹配奇数行对应的元素:eq(index)
匹配下标等于index的元素:gt(index)
匹配下标大于index的元素:lt(index)
匹配下标小于index的元素
-
过滤筛选器(相比上面的方法，推荐使用)
$("li").eq(2) $("li").first() $("ul li").hasclass("test")<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="jquery-1.11.3.js"></script> <title>Document</title> </head> <body> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <button onclick="changeFirst()">匹配第一个元素</button> <button onclick="changeLast()">匹配最后一个元素</button> <button onclick="notSelector()">否定选择器</button> <button onclick="oddSelector()">匹配偶数行</button> <button onclick="evenSelector()">匹配奇数行</button> <button onclick="eqSelector()">匹配指定行</button> <button onclick="gtSelector()">大于指定下标</button> <button onclick="ltSelector()">小于指定下标</button> </body> <script> function changeFirst() { $('p:first').css('color','red'); } function changeLast() { $('p:last').css('color','green'); } function notSelector() { $(':not(html,body,p)').css('border','1px solid blue'); } function oddSelector(){ $('p:odd').css('background','yellow'); } function evenSelector(){ $('p:even').css('background','pink'); } function eqSelector (){ $('p:eq(3)').css('font-weight','bold'); } function gtSelector (){ $('p:gt(3)').css('font-size','36px'); } function ltSelector (){ $('p:lt(3)').css('font-size','13px'); } </script> </html> -
查找筛选器（重要）
$("div").children(".test") <只会找儿子一层> $("div").find(".test") <查找所有子代标签> $(".test").next()<下面的一个标签> $(".test").nextAll()<下面所有标签> $(".test").nextUntil() <开区间内的所有标签> //与next相对应 $("div").prev() $("div").prevAll() $("div").prevUntil() $(".test").parent() $(".test").parents() $(".test").parentUntil() $("div").siblings()<同级别的，除了自身的其它标签><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="">click</a> <p id="p1" alex="sb">pppp</p> <p id="p2" alex="sb">pppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div> <p>alex</p> </div> <div class="outer2">Yuan</div> <p>xialv</p> <ul> <li class="begin">1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>4444</li> <li id="end">4444</li> <li>4444</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <script src="jquery-3.1.1.js"></script> <script> //筛选器 $("li").eq(2).css("color","red"); $("li").first().css("color","red"); $("li").last().css("color","red"); //查找筛选器 $(".outer").children("p").css("color","red"); $(".outer").find("p").css("color","red"); $("li").eq(2).next().css("color","red"); $("li").eq(2).nextAll().css("color","red"); $("li").eq(2).nextUntil("#end").css("color","red"); $("li").eq(4).prev().css("color","red"); $("li").eq(4).prevAll().css("color","red"); $("li").eq(4).prevUntil("li:eq(0)").css("color","red"); console.log($(".outer .inner p").parent().html()); $(".outer .inner p").parents().css("color","red"); $(".outer .inner p").parentsUntil("body").css("color","red"); $(".outer").siblings().css("color","red"); </script> </body> </html>左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; width: 30%; background-color: gainsboro; float: left; } .content{ height: 500px; width: 70%; background-color: rebeccapurple; float: left; } .title{ line-height: 50px; background-color: #425a66; color: forestgreen;} .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> </div> <div class="content"></div> </div> <script src="jquery-3.2.1.js"></script> <script> $(".item .title").click(function () { $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); // $(this).next().removeClass("hide"); // $(this).parent().siblings().children(".con").addClass("hide"); }) </script> </body> </html>
- 属性选择器[]
根据标签属性匹配元素[attribute]
匹配包含指定属性的元素[attribute=value]
匹配属性attribute=value的元素[attribute!=value]
匹配attribute属性值不等于value的元素[attribute^=value]
匹配属性值以value字符开头的元素[attribute$=value]
匹配属性值以value字符结尾的元素[attribute*=value]
匹配属性值中包含value字符的元素<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <p id="p1" class="c1">床前明月光</p> <p class="c2">疑是地上霜</p> <p class="c1">举头望明月</p> <p id="p2" class="c2s">低头思故乡</p> </body> <script> //属性选择器 $('[id]').css('font-size','32px'); //id='p1' $('[id=p1]').css('color','red'); //id属性值不是p1的元素 包含属性值为空的元素 $('[id!=p1]').css('color','green'); //匹配class属性值是以c开头的元素 $('[class^=c]').css('background','yellow'); //匹配class属性值是以1结尾的元素 $('[class$=1]').css('background','orange'); //匹配class属性值包含2的元素 $('[class*=2]').css('border','1px solid red'); </script> </html>
-
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
:input
:input选择器选择input、textarea、select和button元素:text
:text选择器选择所有的单行文本框:password
:password选择器选择所有的密码框:radio
:radio选择器选择所有的单选框:checkbox
:checkbox选择器选择所有的多选框:submit
:submit选择器选择所有的提交按钮:image
:image选择器选择所有的图像按钮:reset
:reset选择器选择所有的重置按钮:button
:button选择器选择所有的按钮:file
:file选择器选择所有的文件上传域
[注意]大部分表单类别筛选器可以使用属性筛选器替换
':password'可以写为'[type=password]'<button id="btn1" style="color: red;">$(':input')</button> <button id="btn2" style="color: #A2CD5A;">$(':text')</button> <button id="btn3" style="color: yellow;">$(':password')</button> <button id="btn4">$(':radio')</button> <button id="btn5">$(':checkbox')</button> <button id="btn6" style="color: #C6E2FF">$(':submit')</button> <button id="btn7" style="color: #F4A460;">$(':image')</button> <button id="btn8" style="color: green;">$(':button')</button> <button id="btn9" style="color: #CD1076;">$(':file')</button> <button id="btn10" style="color: pink;">$(':reset')</button> <button id="reset">还原</button> <form id="box"> <input type="text" value="text类型"/> <input type="password" value="password"/> <input type="radio"/> <input type="checkbox"/> <input type="submit" /> <input type="image" /> <input type="button" value="Button" /> <input type="file" /> <input type="reset" /> </form> <script> reset.onclick = function(){history.go();} btn1.onclick = function(){$('#box :input').css("border", "1px groove red");} btn2.onclick = function(){ $(':text').css("background", "#A2CD5A");} btn3.onclick = function(){$(':password').css("background", "yellow");} btn4.onclick = function(){$(':radio').attr('checked','true');} btn5.onclick = function(){$(':checkbox').attr('checked','true');} btn6.onclick = function(){$('#box :submit').css("background", "#C6E2FF"); } btn7.onclick = function(){$(':image').css("background", "#F4A460"); } btn8.onclick = function(){ $('#box :button').css("background", "green"); } btn9.onclick = function(){$(':file').css("background", "#CD1076"); } btn10.onclick = function(){$(':reset').css("background", "pink"); } </script> -
表单对象属性选择器
:enabled
:enabled选择器选择可用的表单元素
:disabled
:disabled选择器选择不可用的表单元素<button id="btn1" style="color: red;">$(':enabled')</button> <button id="btn2" style="color: #A2CD5A;">$(':disabled')</button> <button id="reset">还原</button> <form> <input type="text" /> <input type="text" disabled/> <input type="text" /> </form> <script src="jquery-3.1.0.js"></script> <script> reset.onclick = function(){history.go();} btn1.onclick = function(){$('form :enabled').css("background", "red");} btn2.onclick = function(){ $(':disabled').css("background", "#A2CD5A");} </script>:checked
:checked选择器选择被选中的元素(单选框、复选框)<button id="btn1">$(':checked')</button> <button id="reset">还原</button> <form> <input type="checkbox" checked> <input type="checkbox"> <input type="radio" checked> <input type="radio"> </form> <script> reset.onclick = function(){history.go();} btn1.onclick = function(){$(':checked').removeAttr('checked')} </script>:selected
:selected选择器选择被选中的元素(下拉列表)<button id="btn1">$(':selected')</button> <button id="reset">还原</button> <select multiple> <option>1</option> <option selected>2</option> <option>3</option> <option selected>4</option> </select> <script> reset.onclick = function(){history.go();} btn1.onclick = function(){$(':selected').removeAttr('selected')} </script>
- 子元素过滤选择器
:first-child
匹配属于其父元素中的首个子元素
:last-child
匹配属于其父元素中的最后一个子元素:nth-child(n)
匹配属于其父元素中的第n个子元素
注意：
将要匹配的子元素与筛选选择器相结合使用<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <ul> <li>白山依山尽</li> <li>黄河入海流</li> <li>白山依山尽</li> <li>黄河入海流</li> </ul> <ul> <li>白山依山尽</li> <li>黄河入海流</li> <li>白山依山尽</li> <li>黄河入海流</li> </ul> </body> <script> //:first 表示匹配文档中第一个该元素 $('li:first').css('color','red'); $('li:last').css('background','pink'); //:first-child 表示匹配所有作为第一个子元素存在的该元素 $('li:first-child').css('color','green'); $('li:last-child').css('background','cyan'); //:nth-child(n) 匹配作为第n个子元素存在的该元素 // the index of each child to match, start with 1 $('li:nth-child(2)').css('border','1px blue solid'); $('li:nth-child(odd)').css('font-size','32px'); //偶数行 在计算机中存储时，对应的是奇数下标 //偶数行 [0,1,2,3] 偶数行对应的下标为1,3 //nth-child(odd) ==> nth-child(1) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>hello</div> <a href="">click</a> <p id="p1" alex="sb">pppp</p> <p id="p2" alex="sb">pppp</p> <div class="outer">outer <div class="inner"> inner <p>inner p</p> </div> <p>alex</p> </div> <div class="outer2">Yuan</div> <p>xialv</p> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>4444</li> <li>4444</li> <li>4444</li> </ul> <input type="text"> <input type="checkbox"> <input type="submit"> <script src="jquery-3.1.1.js"></script> <script> //基本选择器 $("div").css("color","red"); $("*").css("color","red"); $("#p1").css("color","red"); $(".outer").css("color","red"); $(".inner,p,div").css("color","red"); //层级选择器 $(".outer p").css("color","red"); $(".outer>p").css("color","red"); $(".outer+p").css("color","red"); $(".outer~p").css("color","red"); //基本筛选器 $("li:first").css("color","red"); $("li:eq(0)").css("color","red"); $("li:gt(2)").css("color","red"); $("li:lt(2)").css("color","red"); //属性选择器 $("[alex='sb'][id='p1']").css("color","red"); //表单选择器 $("[type='text']").css("width","200px"); $(":text").css("width","400px"); </script> </body> </html>
扫一扫
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
