一.jQuery概述
1.基本功能
- a.访问和操作DOM元素:获取元素,修改其样式和内容,删除元素,复制元素...
- b.对页面事件的处理:不需要指定事件中的函数名,直接在事件中绑定响应函数(匿名函数)
- c.插件的运用:验证插件,UI插件...
- d.Ajax技术的结合:$.ajax({"json格式"}); Ajax异步读取服务器数据
2.代码特点
- a.$符号特点
- b.隐式循环
- c.链式书写
3.js与jq区别
传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
JQ不存在覆盖问题，加载的时候是顺序执行,加载比JS要快！(当整个dom树结构绘制完毕就会加载)
- a.加载效率:
jq:页面框架下载完(页面元素信息)就触发事件 -- 效率高
js:页面中所应用到的所有资源(img...)全部加载完才触发事件 -- 效率低 - b.覆盖问题
jq:不存在覆盖,加载时顺序执行
js:存在覆盖,加载时执行最后一个
二.jQuery选择器
$(selector).action(); 选取元素,获取jQuery对象,再执行方法
选择器参数是一个字符串,当使用变量时,需使用加号将变量与其他字符串联在一起
1.基本选择器
#id--id属性值- .class -- class属性值
- element -- 标签名
- selector1,selectorn -- 多个选择器所匹配的元素
2.层级选择器
- selector1 selector2 -- 后代
- selector1>selector2 -- 子类
- selector1+selector2(next()) -- 下一个相邻兄弟
- selector1~selector2(nextAll()) -- 后面所有兄弟
- siblings() -- 所有兄弟
3.过滤选择器
- a.基本过滤
- :first或first() -- 第一个
- :last或last() -- 最后一个
- :eq(index)或eq(index) -- 索引值等于index(从0开始) :gt()大于 :lt()小于
- :nth-child(index) -- 子元素过滤(索引从1开始,也可以写成2n)
- :not(selector) -- 不包含或除给定的
- b.内容过滤
- :contains(text) -- 选取包含给定文本的元素(也包含后代元素出现了text内容,text中英文有大小写区分)
- :has(selector) -- 选取含有选择器所匹配的元素的元素
- 单标签(input,img,br,hr)都属于空元素
- c.可见性过滤
- :hidden -- 不可见(display:none,input type=hidden,宽高=0)
- :visible -- 可见
- d.属性过滤
- [attr] -- 拥有该属性
- [attr=val] -- 包含属性且等于val
- [selector1][selectorn] -- 同时满足属性过滤的多个条件
4.表单选择器(属性过滤的简化)
-
:input -- input,select,button,textarea元素
-
:text
-
:radio
-
:checkbox
-
:button -- input type=button,button元素
-
:checked -- input -- radio:checked,checkbox:checked
-
:selected -- option -- option:selected
-
:disabled -- 不可用 -- text:disabled,text:enabled
5.筛选
过滤:first(),last(),eq(index),is(expr/obj/ele)判断集合是否有匹配的元素
查找:
- children([expr])子元素,find(expr/obj/ele)后代元素
- parent([expr])父元素,parents([expr])祖先元素
- next([expr])下一个相邻兄弟,nextAll([expr])后面所有兄弟,
- prev([expr])上一个相邻兄弟,prevAll([expr])前面所有兄弟,
- siblings([expr])所有兄弟
三.常用方法
- 设置样式
a.css() -- 添加style
b.addClass() -- 添加class(多个class以空格分开)
c.attr(),prop() -- 设置属性