目录

一、jQuery概述1.1 什么是jQuery1.2 jQuery的优势1.3 jQuery版本支持1.4 jQuery引入1.5 jQuery核心用法1.5.1 $介绍1.5.2 文档就绪事件1.5.3 DOM对象和jQuery对象互相转化（案例1）1.5.3.1 dom对象转jQuery对象:1.5.3.2 jQuery对象转dom对象:1.5.4 基本操作学习：二、jQuery选择器2.1 基本选择器（selector案例一）2.2 层级选择器（selector案例二）2.3 过滤选择器（selector案例三）2.3.1 基本过滤选择器2.3.2 表单过滤选择器2.4 基本选择器、层级选择器与过滤选择器的应用2.5 内容选择器（selector案例四）2.6 可见选择器2.7 属性选择器（selector案例五）2.8 子元素选择器2.9 表单选择器（selector案例六）三、更多操作3.1 操作元素3.1.1 获取元素3.1.2 创建元素3.1.3 添加元素3.1.4 删除元素3.2 操作元素属性实例：表单验证3.3 操作元素内容实例：修改内容3.4 操作元素样式3.4.1 设置元素样式css(JavaScriptON对象)3.4.2 操作元素样式3.5 元素遍历3.5.1 $(selector).each(function(index,element){})3.5.2 $.each(Object,function(index,data){})3.6 事件3.6.1 jQuery事件处理3.6.2 事件绑定方式3.6.3 事件委托$("父").on("click",'子',function(){})3.6.4 动画效果

一、jQuery概述

1.1 什么是jQuery

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。

jQuery：JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

1.2 jQuery的优势

可以简化JavaScript代码可以像css那样获取元素可以修改css来控制页面效果可以兼容常用的浏览器

1.3 jQuery版本支持

jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!

1.x 支持常用的浏览器和IE6+2.x 支持常用的浏览器和IE9+3.x 支持常用的浏览器和IE9+注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。

1.4 jQuery引入

jQueyr类库其实就是一个普通的js文件, 和之前在html中引入js文件方式是一样的！！！

1.5 jQuery核心用法

1.5.1 $介绍

$()：用于获取元素节点，如$(“h1”)，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象这个jQuery对象中包含零个或多个html元素, 比如: ("div")，可以通过jQuery中提供的方法来操作这些匹配的元素，比如("div")，可以通过jQuery中提供的方法来操作这些匹配的元素，比如("div")，可以通过jQuery中提供的方法来操作这些匹配的元素，比如(“div”).remove()；$符号等价于jQuery, 是jQuery单词的简写，$()相当于调用jQuery()

1.5.2 文档就绪事件

所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：

$(document).ready(function(){//xxxx});该函数会在整个html文档加载完之后立即执行! 其作用相当于:

window.onload = function(){ //xxx }其简写形式为:$(function(){//xxxx});

1.5.3 DOM对象和jQuery对象互相转化（案例1）

JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。

1.5.3.1 dom对象转jQuery对象:

var dom = document.getElementById("username");

var $jQuery= $(dom );// js对象转成jQuery对象

1.5.3.2 jQuery对象转dom对象:

var $jQuery = $("#username");

//方式一:

var dom1 = $jQuery[0]; // jQuery对象转成js对象

//方式二:

var dom2 = $jQuery.get(0); // jQuery对象转成js对象

1.5.4 基本操作学习：

1. 事件绑定//1.获取b1按钮$("#b1").click(function(){alert("abc");});2. 入口函数$(function () {});window.onload 和 $(function) 区别* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉* $(function)可以定义多次的。3. 样式控制：css方法// $("#div1").css("background-color","red");$("#div1").css("backgroundColor","pink");

二、jQuery选择器

2.1 基本选择器（selector案例一）

2.2 层级选择器（selector案例二）

如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

2.3 过滤选择器（selector案例三）

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

2.3.1 基本过滤选择器

2.3.2 表单过滤选择器

2.4 基本选择器、层级选择器与过滤选择器的应用

<h1 id="title">登鹳雀楼</h1><ul><li class="Verse">白日依山尽</li><li class="Verse">黄河入海流</li><li >欲穷千里目</li><li>更上一层楼</li></ul><script>$('#title').css('color','red').css('text-align','center');// 所有带有Verse的元素背景颜色 yellow// console.log($('.Verse'))$('.Verse').css('background-color','yellow');// 找到Verse类的后面的第一个兄弟元素如果是li 字体放大变红$('.Verse+li').css('font-size','30px').css('color','red');// $('#title+li').css('color','blue')// Verse后的所有的li居中$('.Verse~li').css('text-align','center');$('.Verse:first').css('text-align','center');$('li:last').css('background-color','pink');// 按索引值匹配$('li:odd').css('color','red');$('li:even').css('color','blue');// 等于 $('li:eq(3)').css('background-color','pink');// 小于 $('li:lt(3)').css('background-color','orange');// 找除了第一个以外的所有li$('li:not(li:first)').css('font-size','20px')// 除了Verse以外的所有li$('li:not(.Verse)').css('font-size','20px')</script>

2.5 内容选择器（selector案例四）

2.6 可见选择器

2.7 属性选择器（selector案例五）

2.8 子元素选择器

2.9 表单选择器（selector案例六）

三、更多操作

内容操作

1. html(): 获取/设置元素的标签体内容 内容 --> 内容

2. text(): 获取/设置元素的标签体纯文本内容 内容 --> 内容

3. val()： 获取/设置元素的value属性值

属性操作

通用属性操作

attr(): 获取/设置元素的属性removeAttr():删除属性prop():获取/设置元素的属性removeProp():删除属性 attr和prop区别？ 如果操作的是元素的固有属性，则建议使用prop如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

addClass():添加class属性值removeClass():删除class属性值toggleClass():切换class属性 toggleClass(“one”): 判断如果元素对象上存在class=“one”，则将属性值one删除掉。 如果元素对象上不存在class=“one”，则添加 css():

CRUD操作:

append():父元素将子元素追加到末尾

对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾prepend():父元素将子元素追加到开头

对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头appendTo():

对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾prependTo()：

对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头after():添加元素到元素后边

对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系before():添加元素到元素前边

对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系insertAfter()

对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系insertBefore()

对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系remove():移除元素

对象.remove():将对象删除掉empty():清空元素的所有后代元素。

对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

3.1 操作元素

3.1.1 获取元素

3.1.2 创建元素

使用$(“标签语法”)，返回创建好的元素

var div = $("<div></div>")//创建元素

div.html("动态创建").attr("id","d1").css("color","red")链式调用，设置内容,属性和样式var h3 = $("<h3 id='d1' style="margin: 0;">三级标题</h3>");//创建的同时设置内容，属性和样式

3.1.3 添加元素

添加子元素:$obj.append(newObj);$obj.prepend(newObj)添加兄弟元素:$obj.after(newObj);$obj.before(newObj)

3.1.4 删除元素

$obj.remove()

3.2 操作元素属性

attr("attrName","value")设置或读取标签属性;

prop("attrName","value")设置或读取标签属性;

注：在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写==

实例：表单验证

<form action="" onsubmit="return checkForm()"><div>姓名 ： <input name="uname" type="text"></div><div>密码 ： <input name="pwd" type="password"></div><div><input id="canLogin" type="checkbox">阅读并同意<a href="#login">协议</a></div><button id="login" name="login">登录</button><!-- <input id="login" type="submit" value="登录"> --></form><script>// form表单 数据提交时会检查onsubmit属性的值 如果返回值为false则阻止本次提交 如果返回值为true 允许提交function checkPassword(){// 检测密码是否符合规则return true;}function checkUname(){// 检测用户名是否符合规则return true;}function checkCanLoad(){// 检测复选框是否被选中return $('#canLogin').prop('checked')}function checkForm(){// 检测表单数据能否提交alert(checkCanLoad()&&checkUname()&&checkPassword())return checkCanLoad()&&checkUname()&&checkPassword();}</script><script>// 当按钮被点击时 // 如果 用户勾选同意协议 就弹框ok// 如果用户没有勾选 提示请阅读协议$('#login').click(function(){console.log($('#canLogin'));console.log($('#canLogin').prop('checked')); //// attr获取的是标签内部已经定义好的属性//// prop获取的是标签原型内部的属性$('#canLogin').prop('checked')?alert('ok'):alert('请阅读协议')})// // 获取属性的值// console.log($('div').prop('id'))// console.log($('div').attr('id')// // 修改/设置属性的值// $('div').prop('id','title') </script>

3.3 操作元素内容

html()设置或读取标签内容,等价于原生innerHTML,可识别标签语法text()设置或读取标签内容,等价于innerText,不能识别标签val()设置或读取表单元素的值,等价于原生value属性

实例：修改内容

<input type="text" id="key"><h3 id="h3" style="margin: 0;">hello</h3><script>$('#key').change(function(){$('#h3').text($('#key').val())})</script>

3.4 操作元素样式

3.4.1 设置元素样式css(JavaScriptON对象)

设置行内样式;css(JavaScriptON对象)设置一组CSS样式css(“属性名”，“属性值”)

{"width":"200px","height":"200px","color":"red"}

3.4.2 操作元素样式

addClass("className")添加指定的类名;removeClass("className")移除指定的类型,如果参数省略,表示清空class属性值toggleClass("className")结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加;注：this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法

<script>var items= document.getElementsByClassName('item')for(var i=0;i<items.length;i++){items[i].onclick=function(){for(var i=0;i<items.length;i++){items[i].setAttribute('class','item ')} ;this.setAttribute('class','item active')}}// 操作标签样式addClass;removeClass$('.item').click( function(){$('.item').removeClass('active');$(this).addClass('active')})// 操作标签样式addClass;removeClass$('.item').click( function(){$(this).addClass('active').siblings().removeClass('active')}) //siblings()表示$(this).的兄弟// 操作标签样式toggleClass $('.item').click( function(){$(this).toggleClass('active')}) //有则移除,无则添加</script>

3.5 元素遍历

3.5.1 $(selector).each(function(index,element){})

为每个匹配元素规定运行的函数;

index - 选择器的 index 位置

element - 当前的元素

3.5.2 $.each(Object,function(index,data){})

框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理

index - 选择器的 index 位置

data- 当前的数据

3.6 事件

3.6.1 jQuery事件处理

原生onload事件不能重复书写，会产生覆盖问题；jquery中通过$(function(){//文档加载完毕后执行}对事件做了优化,可以重复书写ready方法,依次执行

3.6.2 事件绑定方式

on(“事件名称”，function):$("div").on("click",function(){});//新版本使用的多些bind(“事件名称”,function):$("div").bind("click",function(){});//1.6-1.8间的版本事件名作为方法名:$("div").click(function(){});

3.6.3 事件委托$(“父”).on(“click”,‘子’,function(){})

$("父").on("click",'子',function(){})

如果想要设置事件的元素是动态生成的元素要注意顺序

将事件委托给被绑定事件元素的祖先元素(页面中已有的)

当祖先元素的事件被触发之后

会检测是否是指定后代元素触发的内容

如果是 执行事件处理函数 不是 就不执行

向页面添加一个按钮id=btn

<div id="d1"></div><script>$(function(){// 为按钮设置 鼠标单击效果$('body:last').append('<button id="btn1">click me</button>')$('body').on('click','#btn1',function(){alert('hello')})})</script>

3.6.4 动画效果

show(speed,callback)/hide(speed,callback)显示和隐藏slideDown(speed,callback)/slideUp(speed,callback)通过使用滑动下拉和上推效果，显示隐藏的被选元素（只针对块元素）

fadeIn(speed,callback)/fadeOut(speed,callback)通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

speed可选,规定元素从隐藏到完全可见的速度,默认为 “0”

callback可选,show 函数执行完之后，要执行的函数

animate(styles,speed='normal',callback)动画函数，可以实现自定义动画 animate 函数

styles必需,规定产生动画效果的 CSS 样式和值

<div class="height"><a href="/s?/wd='python'" target="_blank" >baidu</a><div class="rela"><div class="abso"></div></div></div><br><button class="btn">动画</button><script >$('.btn').click(function(){console.log($(this).text())switch($(this).text()){case "动画":$('.rela').animate({'right':'1000px','border-radius':'50%'},3000,function(){$('.rela').animate({'right':'0','border-radius':'0'},3000,function(){$('.btn').text('隐藏')})});break;case "隐藏":$('.height').hide(2000,function(){$('.btn').text('显示')});break;case "显示":$('.height').show(2000,function(){$('.btn').text('上推')});break;case "上推":$('.height').slideUp(2000,function(){$('.btn').text('下拉')});break;case "下拉":$('.height').slideDown(2000,function(){$('.btn').text('淡隐')});break;case "淡隐":$('.height').fadeOut(2000,function(){$('.btn').text('淡出')});break;case "淡出":$('.height').fadeIn(2000,function(){$('.btn').text('动画')});break;}})</script>

动画

三种方式显示和隐藏元素

默认显示和隐藏方式

show([speed,[easing],[fn]])

参数： speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)easing：用来指定切换效果，默认是"swing"，可用参数"linear" swing：动画执行时效果是 先慢，中间快，最后又慢linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。

hide([speed,[easing],[fn]])

toggle([speed],[easing],[fn])

滑动显示和隐藏方式

slideDown([speed],[easing],[fn])slideUp([speed,[easing],[fn]])slideToggle([speed],[easing],[fn])

淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])fadeOut([speed],[easing],[fn])fadeToggle([speed,[easing],[fn]])

遍历

js的遍历方式 for(初始化值;循环结束条件;步长) jq的遍历方式 jq对象.each(callback)

语法：

jquery对象.each(function(index,element){});

* index:就是元素在集合中的索引

* element：就是集合中的每一个元素对象

* this：集合中的每一个元素对象

回调函数返回值：

true:如果当前function返回为false，则结束循环(break)。false:如果当前function返回为true，则结束本次循环，继续下次循环(continue) $.each(object, [callback])for…of: jquery 3.0 版本之后提供的方式

for(元素对象 of 容器对象)

事件绑定

jquery标准的绑定方式 jq对象.事件方法(回调函数)；注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。 表单对象.submit();//让表单提交 on绑定事件/off解除绑定 jq对象.on(“事件名称”,回调函数)jq对象.off(“事件名称”) 如果off方法不传递任何参数，则将组件上的所有事件全部解绑 事件切换：toggle

jq对象.toggle(fn1,fn2…)

当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。