一: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])所有兄弟
三:常用方法
1.设置样式
a.css() -- 添加style
b.addClass() -- 添加class(多个class以空格分开)
c.attr(),prop() -- 设置属性