*Python Day58 jQuery1

一、jQuery简单介绍

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

 

二 什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()    
       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

 

二、基本选择器：

1.所有元素选择器：$("*")

2.标签选择器：　　$(" TagName ")

3.class选择器:　　  $(" .className ")

4.id选择器：　　　 $(" #idName")

5.组合选择器：　　$(" .className, #id,Tagname")

三、层级选择器：

1.后代选择器：　　$("x y")

2.儿子选择器：　　$("x>y ")

3.毗邻选择器：　　$("x+y")

4.兄弟选择器：　　$("x~y ")  匹配x中都有y的

 

四、基本筛选器：

1 :first 获取匹配的第一个元素 　　　　　　　　　　　　　　 ~示例：$("p:first") 获取<p>标签内的第一个元素

2 :not(选择器) 去除所有与给定选择器匹配的元素　　　　　　~示例：$("input:not(:checked)") 获取未被选中的input元素

3 :even 选取每个带有偶数 index(索引) 值的元素,从 0 开始计数~示例：$(" tr:even") 获取<tr>标签中索引为偶数的元素

4 :odd 匹配所有索引值为奇数的元素，从 0 开始计数　　　　 ~示例：$("tr:odd")获取<tr>标签中索引为奇数的元素

5 :ep(index) 匹配一个给定索引值的元素　　　　　　　　　　~示例： $("tr:ep(1)")查找<tr>标签的第二行

6 :gt(index) 匹配所有大于给定索引值的元素　　　　　　　　 ~示例：$("tr:gt(0)")查找所有<tr>标签中位置大于索引值为0的元素(除了第一行)

7 :lt(index) 匹配所有小于给定索引值的元素　　　　　　　　  ~示例：$("tr:lt(2)")查找<tr>标签中第一第二行，即索引值是0和1，也就是比2小

8 :last 获取最后个元素　　　　　　　　　　　　　　　　　  ~示例：$("li:last")获取<li>标签中的最后一个元素

9 :animated 匹配所有正在执行动画效果的元素　　　　　　　~示例：$("div:not(:animated)")只有对不在执行动画效果的元素执行特效


10 :focus 匹配当前获取焦点的元素　　　　　　　　　　　　

 

五、属性选择器：

 

1 [attribute]  匹配包含给定属性的元素  ~示例：$("div[id]")查找所有含有id属性的div元素

2 [attribute=value]  匹配给定的属性是某个特定值的元素 ~示例：$("input[name='newsletter']")查找所有name属性是newsletter的input元素

3 [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 ~示例：$("input[name!='newsletter']")查找所有name属性不是newsletter的input元素

4 [attribute^=value] 匹配给定的属性是以某些值开始的元素参数 ~示例：$("input[name^='news']")查找所有name以'news'开始的input元素

5 [attribute$=value] 匹配给定的属性是以某些值结尾的元素  ~示例：$("input[name$='letter']")查找所有name以'letter'结尾的input元素

6 [attribute*=value] 匹配给定的属性是以包含某些值的元素 ~示例： $("input[name*='man']")查找所有 name 包含 'man' 的 input 元素

7 [selector（选择器）1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用 ~示例：$("input[id][name$='man']")找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

 

六、表单选择器  ：

1 :input 匹配所有 input, textarea, select 和 button 元素 $(":input")

2 :text 匹配所有的单行文本框    $(":text")

3 :password 匹配所有密码框  $(":password")

4 :radio 匹配所有单选按钮 $(":radio")

5 :checkbox 匹配所有复选框 $(":checkbox")

6 :submit 匹配所有提交按钮 $(":submit")

7 :image 匹配所有图像域 $(":image")

8 :reset 匹配所有重置按钮 $(":reset")

9 :button 匹配所有按钮 $(":button")

10 :file 匹配所有文件域 $(":file")

七、表单对象属性

1 :enabled 匹配所有可用元素  $("input:enabled") 查找所有可用的input元素

2 :disabled 匹配所有不可用元素 $("input:disabled") 查找所有不可用的input元素

3 :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected   $("input:checked")查找所有选中的复选框元素

4 :selected 匹配所有选中的option元素  $("select option:selected")查找所有选中的选项元素

八、 查找筛选器

1.next([expr]) 

　　取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

　　这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选

　　$("p").next(".selected") 找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

　　$("p").next() 找到每个段落的后面紧邻的同辈元素

2.nextAll([expr])

　　查找当前元素之后所有的同辈元素。可以用表达式过滤

　　$("div:first").nextAll().addClass("after") 给第一个div之后的所有元素加个类

　　　　HTML 代码:　　　　　　　　　　　　　　　　　　　　结果：

　　　　<div></div><div></div><div></div><div></div>      　　　　[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]


3.nextUntil([exp|ele][,fil])
　　查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
　　如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样

4.parent([expr])
　　取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。
　　$("p").parent()  查找每个段落的父元素

5.parents([expr])
　　取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
　　$("span").parents("p") 
    找到每个span的所有是p元素的祖先元素
6.parentsUntil([expr|element][,filter])
　　查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
7.prev([expr])
　　取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

   可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素

　　$("p").prev() 找到每个段落紧邻的前一个同辈元素
8.prevAll([expr])
　　查找当前元素之前所有的同辈元素，可以用表达式过滤

　　$("div:last").prevAll().addClass("before") 给最后一个之前的所有div加上一个类
9.prevUntil([exp|ele][,fil])
　　　　查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

    $('#term-2').prevUntil('dt').css('background-color', 'red')  给#term-2前面直到dt前的元素加上红色背景
10.children([expr])
　　　　取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
　　　　$("div").children() 查找DIV中的每个子元素
11.siblings([expr])
　　　　取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选
　　　　$("div").siblings() 找到每个div的所有同辈元素
12.find(expr|obj|ele)
　　　　搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
　　　　$("p").find("span") 从所有的段落开始，进一步搜索下面的span元素
13.has(expr|ele)
　　　　保留包含特定后代的元素，去掉那些不含有指定后代的元素
　　　　$('li').has('ul').css('background-color', 'red') 给含有ul的li加上背景色