jquery概述及选择器介绍

一.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() -- 设置属性