一、jQuery简介
1、可用的jQuery服务器网站：https://www.bootcdn.cn/
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理
HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery的引入
<script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块) <script type="text/javascript"> //写自己的js或者jquery代码 </script>
二、jQuery与dom对象的关系
(1)jQuery是dom对象的集合;
(2)jQuery和dom对象的方法和属性是隔离的,不能瞎用;
(3)$ <==>jQuery;等价的
两者之间的转换关系
$('选择器')[索引] ----> dom对象
$('dom对象') ----> jquery对象
三、选择器
1、基础选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2、层级选择器（>：儿子选择器；+:毗邻选择器；~：弟弟选择器）
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3、基本筛选器（even：偶数；odd:奇数；lg：小于）
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
4、属性选择器
基本语法:$("[属性1][属性2]...")
$('[id="div1"]') $('["alex="sb"][id]')
5、表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 :
$("input:checked")
6、表单属性选择器
:enabled
:disabled
:checked
:selected
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> </head> <body> <div class="c1" id="i1">DIV</div> <div class="c2"> <p class="c4">111</p> <a href="">click</a> </div> <div class="p1"> <p class="c3" id="i3">222</p> <p class="c3">333</p> <p class="c3" id="i2">444</p> <div> <p>孙子</p> </div> <p class="c3">555</p> <p class="c3 c8">666</p> <p class="c3">777</p> <p class="c3">888</p> </div> <div alex="123" peiqi="678">alex和配齐</div> <div alex="123">alex</div> <div alex="234">egon</div> <div peiqi="678">8888</div> <div class="c5"> <input type="checkbox" name='in' value='456'>111 <input type="checkbox" name='in' checked="checked">222 <input type="checkbox" name='in'>333 </div> <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3" selected="selected">Trees</option> </select> <hr> <div class="c6" yuan="123">123</div> <div class="c7" yuan="234">234</div> <div class="c9"> <p>111</p> <p>222</p> <div class="c10"> <p>333</p> </div> <a href="">click</a> </div> <script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块) <script type="text/javascript"> //写自己的js或者jquery代码 // 基本选择器 // $('*').css('color','red');//通用选择器,选择所有 // $('p').css('color','green');//元素选择器 // $('#i1').css('color','red');//ID选择器 // $('.c3').css('color','red');//类选择器 //层级选择器 // $('.p1 p').css('color','red');//子孙选择器 // $('.p1>p').css('color','red');//儿子选择器 // $('.c8+p').css('color','red');//毗邻选择器,只选择挨着的第一个指定标签 // $('.c8~p').css('color','red');//弟弟选择器 //基本筛选器 // $('.p1 p:eq(3)').css('color','red');//选择索引为3的那个标签,返回值为dom对象 // $('.p1 p:first').css('color','red');//第一个 // $('.p1 p:last').css('color','red');//最后一个 // $('.p1 p:even').css('color','red'); //偶数 // $('.p1 p:lt(2)').css('color','red'); //小于 // $('.p1 p:gt(2)').css('color','red'); //大于 // 属性选择器 // $('[alex]').css('color','red'); //属性名查找 // $('[alex="123"]').css('color','red');//key=value查找 // $("[alex='123'][peiqi='678']").css('color','red');//注意引号区分,多属性之间用[]区分,属性之间不能用空格 //表单选择器 // $(':checkbox');//获取到复选框的输入标签jquery对象 // $('[type="checkbox"]'); </script> </body> </html>
注意:jquery下载好,并加载好,再交给浏览器解析.
四、筛选器进阶
1、取文本方法
取值------------------------------------------------------------------
$('选择器')eq(2).html(); 获取第二个元素内部的html文本(包含标签);
$('选择器')eq(2).text();只获取第二个元素中的文本内容;
赋值------------------------------------------------------------------
$('选择器')eq(2).html('值'); html文本形式替换标签中的内容;
$('选择器')eq(2).text('值'); 字符串形式替换内容;
2、过滤筛选器
$("li").eq(2) //选择第二个元素
$("li").first() //获取到第一个元素
$("ul li").hasclass("test") //判断是否有class='test'属性，按照or判断，有就返回True
$(".c3:"+"eq("+index+")") ;
1、结果是一个dom对象；
2、需要做字符串的拼接；
如：var index=3;
$(".c3:"+"eq("+index+")").css("color","red");
$(".c3").eq(index)
1、结果是一个$对象;
2、不需要拼接，比较好用；
如：var index=3;
$(".c3").eq(index).css("color","red");
3、查找选择器（导航选择器）
// 子--子孙
// $('.c9').children('p').css('color','red');//找所有的儿子里面的p标签
// $('.c9').find('p').css('color','red');//找子孙后代所有的p标签
// $(".p1").children(":first").css("color","red");
//$(".p1").children().first().css("color","red");
//兄弟(next)
// $('#i2').next().css('color','red');//找i2下一个兄弟标签
// $('#i2').nextAll().css('color','red');//找i2下面所有的兄弟标签
// $('#i2').nextUntil('.c8').css('color','red');//选择直到.c8位置的兄弟标签,去头去尾取中间
//兄弟(prev)
// $('#i2').prev().css('color','red');//找i2先前的一个兄弟标签
// $('#i2').prevAll().css('color','red');//找i2先前所有的兄弟标签
// $('#i2').prevUntil('#i3').css('color','red');//选择直到#i3位置的兄弟标签,去头去尾
//父亲(parent)
// $('#i2').parent().css('color','red');//找i2的父亲标签
//$('#i2').parents('可以给定条件').css('color','red');//找i2的祖先标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> </head> <body> <div class="c1" id="i1">DIV</div> <div class="c2"> <p class="c4">111</p> <a href="">click</a> </div> <div class="p1"> <p class="c3" id="i3">222</p> <p class="c3">333</p> <p class="c3" id="i2">444</p> <div> <p>孙子</p> </div> <p class="c3">555</p> <p class="c3 c8">666</p> <p class="c3">777</p> <p class="c3">888</p> </div> <div alex="123" peiqi="678">alex和配齐</div> <div alex="123">alex</div> <div alex="234">egon</div> <div peiqi="678">8888</div> <div class="c5"> <input type="checkbox" name='in' value='456'>111 <input type="checkbox" name='in' checked="checked">222 <input type="checkbox" name='in'>333 </div> <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3" selected="selected">Trees</option> </select> <hr> <div class="c6" yuan="123">123</div> <div class="c7" yuan="234">234</div> <div class="c9"> <p>111</p> <p>222</p> <div class="c10"> <p>333</p> </div> <a href="">click</a> </div> <script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块) <script type="text/javascript"> //写自己的js或者jquery代码 // 基本选择器 // $('*').css('color','red');//通用选择器,选择所有 // $('p').css('color','green');//元素选择器 // $('#i1').css('color','red');//ID选择器 // $('.c3').css('color','red');//类选择器 //层级选择器 // $('.p1 p').css('color','red');//子孙选择器 // $('.p1>p').css('color','red');//儿子选择器 // $('.c8+p').css('color','red');//毗邻选择器,只选择挨着的第一个指定标签 // $('.c8~p').css('color','red');//弟弟选择器 //基本筛选器 // $('.p1 p:eq(3)').css('color','red');//选择索引为3的那个标签,返回值为dom对象 // $('.p1 p:first').css('color','red');//第一个 // $('.p1 p:last').css('color','red');//最后一个 // $('.p1 p:even').css('color','red'); //偶数 // $('.p1 p:lt(2)').css('color','red'); //小于 // $('.p1 p:gt(2)').css('color','red'); //大于 // 属性选择器 // $('[alex]').css('color','red'); //属性名查找 // $('[alex="123"]').css('color','red');//key=value查找 // $("[alex='123'][peiqi='678']").css('color','red');//注意引号区分,多属性之间用[]区分,属性之间不能用空格 //表单选择器 // $(':checkbox');//获取到复选框的输入标签jquery对象 // $('[type="checkbox"]'); // 筛选器进阶 // $(".p1 p").eq(1);//获取到的结果依旧是一个jquery对象 // $(".p1 p").eq(1).text(); // $('.p1 p').ep(2).html(); // 以下较为麻烦,需要做字符串的拼接 // var index=3; // $(".c3:"+"eq("+index+")").css("color","red"); // $(".c3").eq(index).css("color","red"); // console.log($('.c8').hasclass('t1'));//是否存在class='t1',如果存在返回True; // 导航查找 // 子--子孙 // $('.c9').children('p').css('color','red');//找所有的儿子里面的p标签 // $('.c9').find('p').css('color','red');//找子孙后代所有的p标签 // $(".p1").children(":first").css("color","red"); //$(".p1").children().first().css("color","red"); //兄弟(next) // $('#i2').next().css('color','red');//找i2下一个兄弟标签 // $('#i2').nextAll().css('color','red');//找i2下面所有的兄弟标签 // $('#i2').nextUntil('.c8').css('color','red');//选择直到.c8位置的兄弟标签,去头去尾取中间 //兄弟(prev) // $('#i2').prev().css('color','red');//找i2先前的一个兄弟标签 // $('#i2').prevAll().css('color','red');//找i2先前所有的兄弟标签 // $('#i2').prevUntil('#i3').css('color','red');//选择直到#i3位置的兄弟标签,去头去尾 //父亲(parent) // $('#i2').parent().css('color','red');//找i2的父亲标签 //$('#i2').parents('可以给定条件').css('color','red');//找i2的祖先标签 </script> </body> </html>
五、事件绑定
绑定事件的语法:
$('选择器 ').事件(function()
{
执行的代码;
})
注意:内部的this是dom对象;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加一个元素</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button >点击添加</button> <script src='jquery 3.3.1.js'></script> <script type="text/javascript"> //给button添加点击事件 $('button').click(function (){ $('ul').append('<li>444</li>'); }) //给li标签添加点击事件 $('li').click(function(){ //内部的this是一个dom对象 alert($(this).text()); }) </script> </body> </html>
注意:我们这个绑定的示例,新增添的<li>444</li>标签没有点击事件,这不是我们想要的,所以我们需要学习高级一点的绑定事件,事件绑定+事件委派;
六、事件绑定与委派（推荐使用此方法绑定事件）
绑定事件+委派的语法:
父项$.on('事件','需要委派的标签',function()
{
执行的代码;
})
注意:内部的this是dom对象;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加一个元素</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button >点击添加</button> <script src='jquery 3.3.1.js'></script> <script type="text/javascript"> //给button添加点击事件 $('button').click(function (){ $('ul').append('<li>444</li>'); }) //通过父项绑定事件并委派事件 $('ul').on('click','li',function(){ //内部的this是一个dom对象 alert($(this).text()); }) </script> </body> </html>
七、属性操作（补充）
1 文本操作
$("").html()
$("").text()
$("").html("参数")
$("").text("参数")
2 属性操作
$().attr("")
$().attr("","")
$("p").attr("alex")
$("p").attr("alex","dsb")
$("p").removeAttr("class")
3 class 操作
$("p").addClass("c1")
$("p").removeClass("c1")
八、实例补充
$(function(){
jquery代码
})
代码先把文档所有的内容加载完;
再执行 $( ) 括号里面的代码
jquery的链式结构:表示的是当jquery调用方法时,代码的返回值还是当前的jquery对象;
$(this).next().removeClass("hide");
该代码返回值是$(this).next();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧栏</title> <style type="text/css"> body{ margin:0; padding: 0; } ul{ margin: 0; } aside{ width: 20%; height: 800px; background-color: #BFA372FF; } button{ display: inline-block; height: 50px; width:100%; line-height: 50px; background-color: #29C2D0FF; color:white; font-size: 20px; text-align: center; margin-top:2px; } .hide{ display:none; } </style> <script src='jquery 3.3.1.js'></script> <script type="text/javascript"> $( function(){ $('button').on('click',function(){ $(this).next().removeClass('hide'); $(this).parent().siblings().children('aside .nav').addClass('hide'); }) }) </script> </head> <body> <aside> <div> <button class='title'>第一章</button> <ul class='nav hide'> <li>111</li> <li>111</li> <li>111</li> </ul> </div> <div> <button class='title'>第二章</button> <ul class='nav hide'> <li>222</li> <li>222</li> <li>222</li> </ul> </div> <div> <button class='title'>第三章</button> <ul class='nav hide'> <li>333</li> <li>333</li> <li>333</li> </ul> </div> </aside> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航图</title> <style type="text/css"> div{ margin-top: 15px; width:600px; height: 200px; line-height: 200px; background-color: #32A6CCFF; text-align:center; } ul{ margin: 0; padding: 0; font-size: 0; } ul li{ display: inline-block; line-height: 200px; font-size: 38px; text-align: center; width: 200px; } .c1{ background-color: #A662D2FF; } .hide{ display:none; } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript"> $(function(){ $('li').on('click',function(){ $(this).css('color','white'); $(this).css('background-color','#E95469FF'); $(this).siblings().css('background-color',' #32A6CCFF'); $(this).siblings().css('color','black'); // alert($(this).val()); let value=$(this).val() let dis_arr=$(this).parents().parent().siblings(); dis_arr.addClass('hide'); dis_arr.eq(value).removeClass('hide'); }) }) </script> </head> <body> <div> <ul> <li class='nav' value="1">第一章</li> <li class='nav' value="2">第二章</li> <li class='nav' value='3'>第三章</li> </ul> </div> <div class='hide c1'><h1>123</h1></div> <div class='hide c1'><h1>456</h1></div> <div class='hide c1'><h1>789</h1></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>全选</button> <button>取消</button> <button>反选</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> <td>222</td> <td>222</td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> <td>333</td> <td>333</td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> <td>444</td> <td>444</td> <td>444</td> </tr> </table> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $('button').on('click',function(){ switch($(this).text()){ case '全选': $('[type="checkbox"]').prop('checked','checked'); break; case '取消': $('[type="checkbox"]').prop('checked',false); break; case '反选': $("table :checkbox").each(function(){ $(this).prop("checked",!$(this).prop("checked")); }) break; default:console.log(123); break; } }) // $("button").click(function(){ // if($(this).text()=="全选"){ // $(this)代指当前点击标签 // $("table :checkbox").prop("checked",true) // } // else if($(this).text()=="取消"){ // $("table :checkbox").prop("checked",false) // } // else { // $("table :checkbox").each(function(){ // $(this).prop("checked",!$(this).prop("checked")); // }); // } // }); </script> </body> </html>