jQuery

jQuery

jQuery是一个优秀的轻量级javaScript框架。jQuery兼容css3和各大浏览器。提供了 dom、event、animate、ajax。 jQuery插件怎么用。

js和jQuery的区别

• js对象和JQuery对象不同 但可以相互转化。
  • js对象转化成jQuery对象：$(js对象)
  • jQuery对象转化成js对象：jQuery对象[索引]
• js和jQuery的事件写法不同但意义相同
  • js事件是属性；jQuery事件是方法
  • js响应行为是属性值，jQuery事件是方法
  • jQuery事件名称不带on
• js和jQuery文档加载事件不相同

  • JQuery的页面加载有简写形式

  • JQuery的页面加载完成可以有多个，按顺序执行，js只能有一个有效的页面加载完成。

      window.onload = function(){
      		
      alert("js的页面加载完成");
      }
    
       $(document).ready(function(){
      		alert("jq的页面加载完成");
      });
    

选择器（获取标签 类比CSS）

选择一批或一个标签，用来操作样式和属性

基本选择器

1. 标签选择器：$(“标签名称”)
2. id选择器:$(("#id")
3. class选择器:$(".class")

层级选择器

1. $(“a b”)选择a元素的后代b元素 祖孙关系
2. $(“a>b”)选择a元素的子元素b 父子关系
3. $(“a+b”)选择a元素相邻后边的b元素 兄弟关系（同一级）
4. $(“a~b”)选择a元素的所有b元素 弟弟选择器

属性选择器 是对属性过滤然找到后设置属性

假定a是选择器字符串，attr是属性名称，value是值

1. $(“a[attr]”)获取有attr属性的a元素
2. $(“a[attr=’value’]”)获取的attr属性值是value的a元素
3. $(“a[attr^=’value’]”)获取attr属性值以value开头的a元素
4. $(“a[attr$=’value’]”)获取attr属性值以value结尾的a元素
5. $(“a[attr!=’value’]”)获取attr属性值不等于 value的a元素
6. $(“a[attr*=’value’]”)获取attr属性值包含value的a元素
7. $(“a[attr=’value’][attr2]”)复合属性选择器

基本过滤选择器

基本过滤选择器 是对其它选择器的结果进行再次过滤的

1. :first 取第一个 例如$(“div:first”) 从所有div里获取第一个
2. :last 取最后一个 $(“.cls:last”)
3. :not(selector) 排除selector的结果 $(“div:not(.cls)”)
4. :even 取下标偶数的 $(“div:even”)
5. :odd 取下标奇数的
6. :gt(n) 取下标大于n的 $(“div:gt(2)”)
7. :lt(n) 取下标小于n的
8. :eq(n) 取下标等于 n的
9. :header 固定写法，取所有标题h1~h6 $(“:header”)
10. :animated 取动起来的动画 固定写法$(“:animated”)

表单属性选择器

1. :enabled 获取可用的表单项标签
2. :disabled 获取不可用的表单项标签
3. :checked 针对radio和checkbox的，获取被选中的单选或者多选选项
4. :selected 针对下拉框的option标签的，获取被选中的下拉选项

Dom操作（需要获取选择器）

dom操作

1．操作标签体/文本/值

1. 操作标签体：相当于js的innerHTML
   获取标签体：html()
   设置标签体：html(“标签体”)
2. 操作文本：相当于js的innerText
   获取文本：text()
   设置文本：text(“文本”)
3. 操作值：相当于js的value
   获取值：val()
   设置值：val(值)

2．操作样式

获取样式：css(“样式名称”)

设置样式：css(“样式名称”,”值”)

3．操作属性

1. 获取属性
   attr(“属性名称”);
   prop(“属性名称”);

2. 设置属性
   attr(“属性名称”,”值”);
   prop(“属性名称”,”值”);

3. 删除属性
   removeAttr(“属性名称”);
   removeProp(“属性名称”);

注意：checked和selected属性操作，必须使用prop的方法；其它方法推荐优先使用attr的方法，如果attr方法不行，再用prop方法。

4．操作class属性

添加class：addClass(“class名称”)
删除class：removeClass(“class名称”)
切换class：toggleClass(“class名称”)

Dom的树型结构

jQuery使用的步骤：
·

• 通过选择器获得HTML标签对象
• 获得标签对象后可以使用jQuery里提供的所有方法 对整个的HTML文档进行操作。

获取父节点或者祖宗节点的方法 记录

• $(this).closest(’.class’)