一、jQuery简介
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>jquery 选择器、筛选器、事件绑定与事件委派
原文地址：https://www.cnblogs.com/angle6-liu/p/10179473.html