JQuery基础

jQuery语法结构

1、jQuery语法结构
      $(selector).action() ;
      工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
2、添加样式
      jQuery 对象.addClass([样式名]);
3、设置样式
      css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
4、显示和隐藏
      $(selector).show( );
$(selector).hide( );
5、jQuery代码风格
      “$”等同于“ jQuery ”
              $(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...}) 
       链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
隐式迭代
     $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
     });
     6、DOM对象和jQuery对象
      $(“#title”).html( );  等同于  document.getElementById("title").innerHTML; 
DOM对象转jQuery对象
            var txtName =document.getElementById("txtName"); 
var $txtName =$(txtName);  
jQuery对象转DOM对象
      var $txtName =$ ("#txtName"); 
var txtName =$txtName[0]; 或 var txtName =$txtName.get(0);
7、jQuery选择器
       通过CSS选择器选取元素
基本选择器
    标签选择器：$("h2" )选取所有h2元素
类选择器：$(" .title")选取所有class为title的元素
ID选择器：$(" #title")选取id为title的元素
并集选择器：$("div,p,.title" )选取所有div、p和拥有class为title的元素
全局选择器：$("*" )选取所有元素

层次选择器

后代选择器：$("#menu span" )选取#menu下的<span>元素
子选择器：$(" #menu>span" )选取#menu的子元素<span>
相邻元素选择器：$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器：$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

属性选择器

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]

通过过滤选择器选择元素

基本过滤选择器

:first
 :last
 :even: $("li:even" )选取奇数行
 :odd: $("li: odd " )选取偶数行
 :not(selector): $("li:not(.tree) " )
:eq(index)：$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)：$(" li:gt(1)" )选取索引大于1的<li>元素
:lt(index)：$(“li:lt(1)” )选取索引小于1的<li>元素
:header：$(":header" )选取网页中所有标题元素
:focus：$(":focus" )选取当前获取焦点的元素
:animated：$(":animated" )选取当前所有动画元素

可见性过滤选择器

:visible：$(":visible" )选取所有可见的元素
 :hidden：$(":hidden" ) 选取所有隐藏的元素
 $("p:hidden").show();
$("p:visible").hide();