一 jQuery基本概念
1.什么是:第三方,快速,简洁的javascript函数库
2.为什么:
(1)DOM操作的终极简化:
学jquery还是在学DOM,只不过API更简单
核心DOM:万能,API太繁琐
HTML DOM:简洁,不是万能
jQuery简化了:
1.DOM四大操作:查找,修改,删除,添加
2.事件处理
3.动画操作:
4.Ajax操作:
(2)屏蔽浏览器兼容性问题:
凡是jQuery让使用,都没有兼容性问题
3.如何:
第三方:不是浏览器内置的,也不是开发人员自己编写
由其它第三方组织或个人编写的
下载:jQuery.com
版本:1.x 兼容旧浏览器
jquery-1.x.js 为压缩版本 可读写好,体积大
----学习
jQuery-1.x.min.js 压缩版本体积小,可读性差
-----生产环境
CDN网络:内容分发网络
共享的资源在网络中多台服务器上都有副本
客户端请求资源时,CDN网络会智能选择离客户端最近,网络最近的服务器下载资源。
为什么:就近快速获得资源
何时:只要公共的/通用的库/框架到从CDN网络中调用
script src="http://CDN地址"
使用jQuery之前,必须先引入jQuery.js文件:
二 jQuery对象:
1.什么是:用jQuery工厂函数包装jQuery简化版API之前,都有将DOM对象包装为jQuery对象
2.何时:只要希望使用jquery简化版API之前,都要将DOM对象包装为jquery对象
3.如何:
(1).将现有DOM对象包装为jQuery对象
var $xxx = jQuery(DOM对象)
(2)何时:如何已经获得了一个DOM对象,想用简化版API。比如:this, e.target,转化为jQuery对象
var $this=jQuery(this);
var $target = jQuery(e.target);
4.直接用jquery工厂函数查找:
var $xxx= jquery("选择器")
何时:绝对多数情况,在未获得任何元素中,首选用jquery工厂函数直接查找元素。
引入jquery,js文件时:3件事:
(1)向window中添加了一个jquery工厂函数,用于创建Jquery类型的对象
(2)为jquery工厂函数添加了一个原型对象
在jquery工厂函数的原型对象中封装了所有简化版API。
每次使用jquery工厂函数获得的jquery结果中对象继承自jquery原型对象,可直接使用原型对象中保存的简化版API
(3)向window中添加全局变量$,引用jquery工厂函数。——所有jquery都可用$代替。
问题:如果选择器查找到多个元素,如何保存
其实:jquery对象是一个类数组对象
找到的每个DOM对象都是类数组对象中的一个元素
且 Jqeury简化版API都自带forEach效果
只需要调用一次,即可自动应用到每个DOM对象上
小知识:
chrome控制台中也可以使用$("选择器")查找元素:
chrome控制台也提供了$函数类似于jquery的$,但无需引入jquery也可以使用。
如何;只查找一个:$("选择器")相当于jquerySelector
找多个:$$("选择器")相当于querySelectorAll
一.查找
1.选择器:css jquery新增
基本:5个 同css
#id elemenet .class * selector1,selector2,...
层级:4个 通css
parent child parent>son
prev + next prev~siblings
实例:1.事件绑定:$(...)事件名(function(){...})
2.修改css样式:$(...).css("css属性名","值")
强调:对$(...)调用一次API,相当于自动对$(...)找到的每个DOM元素分别调用API——自带forEach
按选择器查找:过滤选择器
1.基本过滤 :位置过滤--------jquery独有, css没有
什么是:根据元素在查找结果集合中的下标位置选择元素
强调:1.将所有元素查找到集合中 再按照下标过滤
2.下标从0开始
3.和元素在父元素中的相对位置无关
何时使用:只要希望根据元素在结果集合中的位置查找元素
如何使用:
包括:
(1) elem(s):first/last 获取结果集合中第一个/最后一个元素
(2) elem(s):even/odd 获取结果结合中偶数/奇数位置的元素
(3) elem(s):lt/gt/eq(i) 获取结果集合中小于/大于/等于i位置的元素
基本过滤中特殊: animated 选择正在播放动画的元素
(4) elem(s):animated
(5) elem(s):not(selector) 否定伪类,同css
练习过程中的问题:
一个 .css 只能设置一个css属性
解决: $(...). css({
css属性 :值,
... : ...
});
强调:1.css属性必须去横线变驼峰
强烈建议,只要在js中使用css属性,都去横线变驼峰
2.如果属性值为数字,可不加引号,且可省略单位
2.子元素过滤:同css
什么是:根据元素在其父元素中的相对位置选择
强调:1.序号从1开始
2.序号相对于父元素内部编号
何时:只要根据元素在其父元素中的位置选择
如何: 包括:
(1):first/last-child 获取作为其父元素下一个第一个子元素的所有元素
(2):nth-child(n|2n|2n+1|eveb|odd)
(3):only-child 获取作为独生子女的子元素
3.内容过滤:根据元素的内容查找
:contains(tetx) 查找内容中包含tetx的元素
比如:span:contains("购物车")
强调:只能是文字中包含text的,如果是标签中包含,则不选择
(1):empty 查找内容为空的元素
(2):parent 查找内容不为空的元素 -> :not(:empty)
强调:只要包含内容(子元素或文本)就选择
(3):has(selector) 选择包含符合selector要求的子元素的父元素
比如:li:has(.active) 选择包含class为active的子元素的父元素li
4.可见性过滤:
:hidden :选择所有不可见的元素
让网页不可见:4种:
display:none,
visibility:hidden,
opactiy:0
type="hidden"
但是:
:hidden只能选择display :none 的type ="hidden"的
:visible :选择所有可见的元素
5.属性过滤:同css的属性选择器
什么是:按照任意属性的任意值选择元素
何时:只要按除id,元素,class之外的其他属性作为条件查找时,甚至模糊查找时
如何:
[属性名] 选择包含指定属性的元素
[属性名 = 值] 选择属性的值等于指定值的元素
[属性名 ^=值] 选择属性值以指定值开头的元素
[属性名$= 值] 选择属性值以指定值结尾的元素
[属性名 *=值] 选择属性值包含指定值的元素
[属性名 != 值] 选择属性值不等于指定值的元素
其实::not([属性名 !=值])
强调:即选择包含title属性,但值不符合
也选择不包含title属性的
特殊:且
[属性选择器1][属性选择器2]...
表单元素过滤:
什么是:利用表单元素的标签名和type属性值选择表单中元素
何时:只要查找表单中的表单元素时
如何;包含:
(1):input 选择所有表单元素:inout selecttextarea button
每种type都对应一个选择器:
(2):text:password :radio :checkb ox:submit:reset
:file :button :hidden :iamge
6.状态过滤:
什么是:选择处于三大状态之一的元素
何时:只要根据元素的状态选择元素
如何:包含
(1):disabled
(2):checked
(3):selected
练习:问题 1:.css智能修改css属性
解决:.attr("属性名","新值")
可修改标准属性
.attr("属性名") 获取属性值
总结:jquery API第二大特点:
一个函数两用:没提供新值,就读取属性现有的值
提供了新值,就修改属性为新值
问题:2 attr 无法访问三大状态属性
解决:pop()专门操作三大状态属性
总结:
什么时候用选择器查找
没有任何元素,执行首次查找时