目录
一、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(迁移)插件可以恢复此功能。