jQuery基础

1. 学习笔记：
2.  
   jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

1、将jquery对象转成DOM对象 
（1）数组下标读取jQuery中的DOM 
例：HTML中：

1.  
   <div>星期一</div>
2.  
   <div>星期二</div>
3.  
   <div>星期三</div>

JavaScript中：

1.  
   var txt=$div[0]； //转换成DOM对象
2.  
   var $txt=$("div")[0]； //jQuery对象
3.  
   txt.style.width="100px" //操作DOM属性

（2）通过jQuery自带的get（）方法

1.  
   var $txt=$("div");
2.  
   var txt=$div.get[0];

2、DOM对象转换成jQuery对象 
例； 
var txt=document.getElementsByTagName(“div”); 
//获取DOM对象

1.  
   var $txt=$(div); //jQuery对象
2.  
   var $first=$txt.first(); //找到第一个div元素
3.  
   $first.css("color","blue");//给第一个元素设置样式

3、jQuery选择器 
（1）id选择器

1.  
   <div id=one>
2.  
   <p>你今天真美</p>
3.  
   </div>

原生JavaScript：

1.  
   var txt=document.getElementBYId("#one");
2.  
   txt.style.border="1px solid silver"

jQuery写法：

$("#one").css("border","1px solid silver");   //注意为#one

 （2）类选择器：

•  

1.  
   <div class=one>
2.  
   <ul class=ul_list>
3.  
   <li class=li_list>周一</li>
4.  
   <li class=li_list>周二</li>
5.  
   <li class=li_list>周三</li>
6.  
   <li class=li_list>周四</li>
7.  
   </ul>
8.  
   </div>

• 原生JavaScript：

1.  
   var txt=document.getElementsByClassName("li_list");
2.  
   for(var i=0;i<txt.length;i++){
3.  
   txt[i].style.color="yellow";
4.  
    
5.  
   }

• jQuery写法：

$(".li_list").css("color","blue");     //注意为.li_list

（3）元素选择器

1.  
   <div class=one>
2.  
   <ul class=ul_list>
3.  
   <li class=li_list>周一</li>
4.  
   <li class=li_list>周二</li>
5.  
   <li class=li_list>周三</li>
6.  
   <li class=li_list>周四</li>
7.  
   </ul>
8.  
   </div>

原生JavaScript：

1.  
   var txt=document.getElementsByTagName("li");
2.  
   for(var i=0;i<txt.length;i++){
3.  
   txt[i].style.color="yellow";
4.  
    
5.  
   }

jQuery写法：

$("li").css("color","blue");

（4）全选择器 
$(“*”)

兼容性说明： 
1、IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的2、getElementById的参数在IE8及较低的版本不区分大小写 
3、IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A 
4、IE8及较低的版本，浏览器不支持getElementsByClassName 
（5）层级选择器

1.  
   ">"大于号：子选择器；$("div>p") //所有div下的第一层的p元素
2.  
   " "空格：后代选择器：$("div p") //所有div元素下的所有p元素
3.  
   "+"加号：相邻兄弟选择器：$("div+p") //紧跟div元素后面的p元素
4.  
   "~"波浪线：一般兄弟选择器：$("div~p")1 //div同层紧接着后面的所有p元素
5.  
   ","逗号：选择器组合：$("div p,span p") //div下的p节点和span下的p节点

（6）基本筛选选择器

 
* :eq(); //全称为equal”相等” 
* :lt()； //全称为less than “小于” 
* :gt(); //全称为greater than “大于” 
（7）内容筛选选择器 
 
注意： 
* :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素 
* 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。 
* :parent与:empty是相反的，两者所涉及的子元素，包括文本节点 
（8）可见性筛选选择器 
 
隐藏元素的几种方式： 
* CSS display的值是none。 
* type=”hidden”的表单元素。 
*宽度和高度都显式设置为0。//不可见的：visible值为0如果给其加上border并设置有效值则可见； 
*一个祖先元素是隐藏的，该元素是不会在页面上显示 
* CSS visibility的值是hidden //可见的：visible值为1 
* CSS opacity的指是0 //可见的：visible值为1 
注意： 
*如果元素中占据文档中一定的空间,元素被认为是可见的。 
*可见元素的宽度或高度，是大于零。 
*元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。 
可见的：#div:visible取到的元素长度为1,#div：hiddle取不到元素，则为0； 
不可见的：#div：hiddle取到的元素长度为1，#div：visible取不到元素则为0 
注意： 
display:none 你看不到 JQ也看不到

width:0 height:0 （行内元素） 你看得到 JQ看不到

opacity:0 （就是经常用的模糊度，=0就是完全隐藏） 你看不到 JQ看得到 
（9）属性筛选选择器