是Javascript和Query,是辅助Javascript开发的js类库
核心思想:write less,do more,所以实现了很多浏览器的兼容问题
好处:免费、开源,使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等功能
Insert title here
jQuery核心函数①使用jQuery一定要使用jQuery类库嘛?
必须
②jQuery中的$是什么?
一个函数
③怎么为按钮添加响应函数?
1.使用jQuery查询到标签对象
2.使用标签对象.click(function(){});
$是jQuery的核心函数,能完成jQuery的很多功能。$()就是调用$这个函数
1.传入参数为[函数]
表示页面加载完成之后,相当于window.οnlοad=function(){}
2.传入参数为[HTML字符串]
会创建标签对象
Insert title here
3.传入参数为[选择器字符串]
类似于cs选择器
$("#id属性值"); // id选择器,根据id查询标签对象
$(“标签名”); //标签名选择器,根据指定的标签名查询标签对象
$(".class属性值");//类型选择器,可以根据class属性查询标签对象
Insert title here
4.传入参数为[DOM对象]
会把这个DOM对象转化为jQuery对象
DOM对象
jQuery对象
jQuery对象和dom对象区分Insert title here
Dom对象
通过getElementById、getElementByName、getElementByTagName、createElement方法创建的对象
Dom对象alert出来的效果是:[object HTMLButtonElement]
jQuery对象
jQuery对象的本质通过jQuery提供的API创建的对象、jQuery包装的Dom对象、jQuery提供的API查询到的对象
jQuery对象alert出来的效果是:[object Object]
是Dom对象数组+jQuery提供的一系列功能函数。
Insert title here Atguigu is Very Good!
Dom对象对象不能使用jQuery对象的属性和方法
jQuery对象对象不能使用Dom对象的属性和方法
Dom对象和jQuery对象的相互转换(重点)Insert title here Atguigu is Very Good!
1.Dom对象转化为jQuery对象
1>先有Dom对象
2>$(DOM对象)就可以转化成为jQuery对象
2.jQuery对象可以转化为Dom对象
1>先有jQuery对象
2>jQuery对象通过下标取出相应的Dom对象
jQuery选择器(重点) 基本选择器Insert title here Atguigu is Very Good!
①
②
③
④
⑤
p.myClass表示标签名必须是p标签,而且Class类型还要是myClass
结果和选择器的顺序无关,与页面的标签顺序有关。
层级选择器Untitled document
id 为 one,class 为 one 的divclass为miniid为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为mini//display:none的作用是让div不显示 //class的css是display:noneclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div^^span元素^^
①ancestor descendant 后代选择器
在给定的祖先元素下匹配所有的后代元素
②parents>child 子元素选择器
在给定的父元素下匹配所有的子元素
③parent+next 相邻元素选择器
匹配所有紧接在prev元素后的next元素
④prev~sibings 之后的兄弟元素选择器
匹配prev元素之后的所有siblings元素
过滤选择器 基本过滤选择器Untitled document
id 为 one,class 为 one 的divclass为miniid为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div^^span元素^^
内容过滤选择器Untitled document 基本选择器.
id 为 one,class 为 one 的divclass为miniid为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div正在执行动画的div元素.
返回包含p的div
非空
属性过滤器Untitled document
id 为 one,class 为 one 的divclass为miniid为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div正在执行动画的div元素.
!有两种情况:
①不含该属性
②含该属性,值不等
表单过滤器Untitled document
id 为 one,class 为 one 的divclass为miniid为two,class为one,title为test的divclass为mini,title为otherclass为mini,title为testclass为miniclass为miniclass为miniclass为miniclass为miniclass为miniclass为mini,title为tesstclass为"hide"的div包含input的type为"hidden"的div正在执行动画的div元素.
匹配所有type=“”的input
disabled=“disabled”
…
Untitled document 表单对象属性过滤选择器



