jQuery基础（一）

很害羞哦这是本人第一次写博客记录我的学习前端之路，有什么问题欢迎留言砸评论，谢谢大家哈 ！！

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

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

     <div>星期一</div>
     <div>星期二</div>
     <div>星期三</div>

JavaScript中：

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

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

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

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

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

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

<div id=one>
  <p>你今天真美</p>
</div>

原生JavaScript：

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

jQuery写法：

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

（2）类选择器：

<div class=one>
  <ul class=ul_list>
    <li class=li_list>周一</li>
    <li class=li_list>周二</li>
    <li class=li_list>周三</li>
    <li class=li_list>周四</li>
 </ul>
</div>

原生JavaScript：

var txt=document.getElementsByClassName("li_list");
for(var i=0;i<txt.length;i++){
    txt[i].style.color="yellow";

}

jQuery写法：

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

（3）元素选择器

<div class=one>
  <ul class=ul_list>
    <li class=li_list>周一</li>
    <li class=li_list>周二</li>
    <li class=li_list>周三</li>
    <li class=li_list>周四</li>
 </ul>
</div>

原生JavaScript：

var txt=document.getElementsByTagName("li");
for(var i=0;i<txt.length;i++){
    txt[i].style.color="yellow";

}

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）层级选择器

 ">"大于号：子选择器；$("div>p") //所有div下的第一层的p元素
 " "空格：后代选择器：$("div p")     //所有div元素下的所有p元素
 "+"加号：相邻兄弟选择器：$("div+p")      //紧跟div元素后面的p元素
 "~"波浪线：一般兄弟选择器：$("div~p")1  //div同层紧接着后面的所有p元素
 ","逗号：选择器组合：$("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）属性筛选选择器