jQuery学习笔记 一

一 jquery基础选择器


1 id选择器
$("#my_id")
例如:




2 元素选择器
$("element")
例如:




3 类选择器
$(".class")
例如:

我穿红衣了

$(".red").html(ddd);

4 全选选择器
$("*")
例如:








5 sele1,sele2,seleN选择器(多重选择)
$("div,p,#mytestid")
例如:
 
       
选我吧!我是red

       
选我吧!我是green

       
选我吧!我是blue

       
       
   
6 层次选择器
在应用开发中常常多个元素套在一起,形成复杂的层次关系,通过层次选择器,
可以快速定位某一层次的一个或者多个元素



 






7 孩子元素选择器
选择的目标是子集元素 相当于一个家庭中的子辈们
$("parent > child")



 







8 prev+next选择器
查找与prev元素紧邻的下一个"next"元素选择器
$("prev+next")


码农家族
我是span1

我是p先生


我是span2
我是span3




9 prev~siblings
查找和prev元素同属于一级的并且在它之后的全部相邻元素

       

            码农家族
           
           


           
           
       

       
       
       
   

二 jquery过滤选择器
书写时以:开头,通常用于查找集合元素中的某一个位置的单个元素
1 选取第一个元素:first  选取最后一个元素:last

       
改变最后一行"苹果"背景颜色:

       

               
  1. 葡萄

  2.            
  3. 香蕉

  4.            
  5. 橘子

  6.            
  7. 西瓜

  8.            
  9. 苹果

  10.        

       
       
   
   
2 如果想从一组标签元素数组中,灵活选择任意一个标签元素
:eq(index)
其中参数index表示索引号(即:一个整数),它从0开始,如果index的值为3,表示选择的是第4个元素
例如:

       
改变中间行"葡萄"背景颜色:

       

           
  1. 橘子

  2.        
  3. 香蕉

  4.        
  5. 葡萄

  6.        
  7. 苹果

  8.        
  9. 西瓜

  10.        

       
3 有时候我们可能希望按照文本内容来查找一个或多个元素,那么使用:contains(text)选择器会更加方便, 它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,
获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。
例如:
 
       
改变包含"jQuery"字符内容的背景色:

       

               
  1. 强大的"jQuery"

  2.            
  3. "javascript"也很实用

  4.            
  5. "jQuery"前端必学

  6.            
  7. "java"是一种开发语言

  8.            
  9. 前端利器——"jQuery"

  10.        

       
       
   
4 使用包含的元素名称来过滤,:has(selector)过滤选择器的功能是获取玄子琪中包含指定元素名称
的全部元素selector参数就是包含的元素名称
例如:
       
改变包含"label"元素的背景色:

       

               
  1. 我是P先生


  2.            

  3.            
  4. 我也是P先生


  5.            

  6.            
  7. P先生就是我哦


  8.        

       
        
   
5 获取不可见的元素
:hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素
例如:

       

显示隐藏元素的内容


       
       

       
       
   
6 获得可见元素
:visible过滤选择器获取的是全部可见的元素,
也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。
例如:

       

修改可见“水果”的背景色


       

               
  • 橘子

  •            
  • 香蕉

  •            
  • 葡萄

  •            
  • 苹果

  •            
  • 西瓜

  •        

       
       
   
7 [attribute=value]属性选择器
属性作为DOM元素的一个重要特征,也可以用于选择器中,从本节开始将介绍通过元素属性获取元素的选择器,
[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素,
其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值
例如:
  
       

改变"title"属性值为"蔬菜"的背景色


       

               
  • 茄子

  •            
  • 香蕉

  •            
  • 芹菜

  •            
  • 苹果

  •            
  • 西瓜

  •        

       
       
8 [attribute!=value]属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素,
其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
9 [attribute*=value]属性选择器
它可以获取属性值中包含指定内容的全部元素,
其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。
例如:
 
       

改变"title"属性值包含"果"的背景色


       

               
  • 茄子

  •            
  • 香蕉

  •            
  • 芹菜

  •            
  • 小西红柿

  •            
  • 西瓜

  •        

       
       
   
10 :first-child子元素过滤选择器
:first过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,
而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素,
它是一个集合,常用多个集合数据的选择处理
例如:

       

改变每个"蔬菜水果"中第一行的背景色


       

               
  1. 芹菜

  2.            
  3. 茄子

  4.            
  5. 萝卜

  6.            
  7. 大白菜

  8.            
  9. 西红柿

  10.        

       

               
  1. 橘子

  2.            
  3. 香蕉

  4.            
  5. 葡萄

  6.            
  7. 苹果

  8.            
  9. 西瓜

  10.        

       
       
   
11 :last-child子元素过滤选择器
:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素,
它也是一个集合,常用多个集合数据的选择处理
例如:

       

改变每个"蔬菜水果"中最后一行的背景色


       

               
  1. 芹菜

  2.            
  3. 茄子

  4.            
  5. 萝卜

  6.            
  7. 大白菜

  8.            
  9. 西红柿

  10.        

       

               
  1. 橘子

  2.            
  3. 香蕉

  4.            
  5. 葡萄

  6.            
  7. 苹果

  8.            
  9. 西瓜

  10.        

       
       
   
三 表单选择器
1 :input
:input表单选择器可以实现,它的功能是返回全部的表单元素,
不仅包括所有标记的表单元素,
而且还包括

       

       
       
       
   
2 :text表单文本选择器
:text表单文本选择器可以获取表单中全部单行的文本输入框元素,
单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
例如:

       

修改多个单行输入框元素的背景色


       

       

       

       

       

       

       
       
   
3 :password表单密码选择器
:password选择器,它的功能是获取表单中全部的密码输入文本框元素。
例如:
 
       

修改多个密码输入框元素的背景色


       

       

       

       

       

       

       

       
       
   
4 :radio单选按钮选择器
:radio选择器可轻松获取表单中的全部单选按钮元素。
例如:

       

将表单中单选按钮设为不可用


       

       

       
       
       
       

       

       

       
       
   
5 :checkbox复选框选择器
使用:checkbox选择器可以快速定位并获取表单中的复选框元素
例如:
 
       

将表单的全部复选框设为不可用


       

       

       
       

       
       

       
       

       

       

       
       
   
6 :submit提交按钮选择器
一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit选择器可获取表单中的这个提交按钮元素
例如:
 
       

修改表单中提交按钮的背景色


       

       

       

       

       

       
       
   
7 :image图像域选择器
:image选择器可以快速获取该类全部元素。例如,在表单中添加两种类型的图像元素,
使用:image选择器获取其中的一种图像元素,并改变该元素的边框样式
8 :button表单按钮选择器
:button选择器能获取且只能获取“type”属性值为“button”的