jquery选择器属性和方法的操作

一、jQuery下载

下载地址：http://www.jquery.com/

目前最新有2.x版本，但是以后工作中尽量使用1.9以下的版本，1.9之后不再支持ie8以下浏览器。

 $()  这个符号，实际上这个符号在JQuery中相当于JQuery（）,即$(this)=jquery();也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了。

二、强大的选择器

1、基本选择器（重点）

• #id表示选择指定id这个元素

• .class表示选择指定的class这个元素

• Element表示选择指定的标签

• selector1,selector2匹配多个选择器

2、层级选择器（重点）

$(s1  s2) [父子]

派生选择器：在s1内部获得全部的s2节点(不考虑层次)

$(“div  span”);  在div内部获得span节点

<div>

<span></span>

<p><span></span></p>

</div>

<span></span>

$(s1>s2) [ 父子 ]

直接子元素选择器:  在s1内部获得子元素节点s2

$(‘div > span’);  //在div内部获得子元素span节点

<div>

<span></span>

<p><span></span></p>

<span></span>

</div>

<span></span>

$(s1 + s2) [兄弟]

直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(‘div + span’)    //在div后边获得紧紧挨着的第一个兄弟关系的span节点

<div>

<span></span>

<p><span></span></p>

<span></span>

</div>

<span></span>

<span></span>

<div></div>

<span></span>

$(s1 ~ s2) [兄弟]

后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

$(‘div ~ span)    //获得div后边全部兄弟关系的span节点

<div>

<span></span>

<p><span></span></p>

<span></span>

</div>

<span></span>

<span></span>

<div></div>

<span></span>

<p></p>

<span></span>

3、简单选择器

都需要跟其他的选择器（标签选择器）组合起来使用

• :first 首先，第一，  选取第一个元素

• :last 最后，末尾，  选取最后一个元素

• :even 偶数 选取索引为偶数的元素 0也算偶数

• :odd  奇数 选取索引为奇数的元素

• :eq(index)表示选取索引为index的元素

• :gt(index) 大于 选取索引大于index的元素

• :lt(index) 小于 选取索引小于index 的元素

• :not(selector) 选取非指定选择器的元素(取出某个节点)

$("li:not(#a)") 括号内可以跟一些标签，类选择器，id选择器等

4、内容选择器

• :contains(text)   表示内容里包含指定的内容的选择器

包含内容选择器，获得的节点内部必须包含指定的内容

$(‘div:contains(beijing)’)

<div>I like <span>beijing</span></div>  //标签不构成影响

<div>xiaoming like shanghai</div>

• :empty 选择为空的元素

获得空元素(内部没有任何元素/文本(空) )节点对象

$(‘div:empty’)

<div>I like <span>beijing</span></div>

<div>     </div>

<div>hello</div>

<div><img /></div>

<div></div>

• :has(selector)  选取包含指定选择器的元素

节点内部必须包含指定选择器对应的元素

$(‘div:has(#apple)’)

<div><p></p></div>

<div><span id=’apple’></span></div>

• :parent 表示选取子元素中内容不为空的子元素

寻找的节点必须作为父元素节点存在

$(‘div:parent’)

<div></div>

<div>    </div>

<div><input type=”text”></div>

<div>sun</div>

5、可见性选择器

• :hidden   表示选取隐藏的元素   display:none

• :visible 表示选取可见的元素

6、属性选择器

• [attribute] 表示选取包含指定属性的元素

• [attribute=value]表示选取属性值是value的元素

• [attribute!=value] 表示选取属性值不等于value的元素

• [attribute^=value] 表示选取属性以value开头的元素

• [attribute$=value]  表示选取属性以value结束的元素

• [attribute*=value] 表示选取属性包含value的元素

• [attribute1][ attribute2][ attributeN] 表示选取多个指定属性的元素

三、 属性和方法的操作

属性的操作

$().attr(name)表示读取属性的值

$().attr(key,value)表示设置，设置key的属性值是value

$().attr(properties) 批量设置，通过json对象去实现，需要传递json对象

$().attr(key,fn) 表示设置，通过回调函数（函数的返回值）来设置属性的值

$().removeAttr(name)移除指定的属性

Class操作方法

• addClass(class)     添加指定的class

• removeClass(class)移出指定的class

• toggleClass(class)切换class

• hasClass(class)表示判断指定的选择器是否存在需要查询的class名字，返回值是bool数据，如果存在返回true，否则返回false

Css样式操作

• css(name)   表示获取指定的css设置

$().css('width') //300

• css(name,value) 给指定的css做相应的设置

$().css("color","red")

• css(properties) 通过json对象方式批量设置css样式

$().css({color:'red',width:'200px'})

宽高尺寸的设置

• width() 获取选择器的宽度

• width(value) 设置选择器的宽度

• height() 获取选择器的高度

• height(value) 设置选择器的高度

文本的操作

① 获取内容

前者可以获取html标签 和 普通字符串内容

后者只获取普通字符串内容 (会自动过滤html标签)

② 设置内容

前者可以设置html标签 和 普通字符串内容

后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----<  >---->   空格------

以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致

• html() 获取标签（双标签，如p、div、span等）里的内容或者html代码 innerHtml

• html(val) 给标签设置文本内容，也包含了html标签

• text() 只能获取标签中的文本内容，不包含html标签 innerText

• text(val) 给标签设置文本内容，如果里面包含了html标签，则会被转化成实体字符，最终在页面上原样输出，不会被浏览器解析成html标签。

值的操作

$().attr(‘value’);

$().attr(‘value’,信息值);

$()•val() 表示获取选择器的value，input select 指的是value值

$()•val(val) 表示给选择器设置值

textarea：使用val方法可以获取该标签的值，使用html方法也可以获取该标签的值。

该val()方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。

总结：

类(class)选择器：class="d1"  $(".d1").html()类选择器用点（.）

id选择器：id="d1"   $("#d1").html();id选择器用（#）

标签选择器：如：p,a,input等

5. 表单域选中选择器

复选框、单选按钮、下拉列表

$(:checked)复选框、单选按钮 选中选择器

$(:selected) 下拉列表 选中选择器

6. 复选框操作

全选、反选、全不选

$().attr(‘checked’,true);         //设置复选框选中

$().attr(‘checked’,false);        //取消复选框选中

$().attr(‘checked’);                //判断复选框选中情况，返回布尔值

关于复选框，全选，全不选，反选的操作

<script type="text/javascript">

$(function(){

//全选
  $("#quanxuan").click(function(){
  $("input").attr('checked',true);
  });

//全不选
  $("#quanbuxuan").click(function(){
  $("input").attr('checked',false);
  })

//反选
          $("#fanxuan").click(function(){
          // alert(2);
          console.log($("input").length);
          for(var i=0;i<$("input").length;i++){
          var a = $("input:eq("+i+")").attr("checked");
          $("input:eq("+i+")").attr("checked",!a);
          }
          });
   });
</script>

Each使用

•  each(callback)each方法只有一个参数，需要执行的函数。

    functioncallback(index,element){

    }

Index：遍历到的当前索引值（索引是从0开始）

Element：遍历到的当前dom对象 即：el

  <script type="text/javascript">
$(function(){
      $("#d2").click(function(){
       $("div").each(function(a,el){
                    $(el).html("第"+(a+1)+"个div")
       })
      })
  
   });
</script>

$(function(){
$("#aa").click(function(){
  $(":checkbox").each(function(index,element){
     var a = $(element).attr("checked");
      console.log($(element));
  })
})
})

复选框的反选，使用了each(),element代表获取的dom元素对象，$(element);将元素转化为jquery数组对象

$(function(){
$("#aa").click(function(){
var str = '';
$(":checkbox:checked").each(function(index,el){
                 str += $(el).val()+",";
});
 var lastIndex = str.lastIndexOf(',');
 str = str.substring(0, lastIndex);
 console.log(str);
})
})

使用each()方法获取多个input框中的id的值

总结：

简单选择器：

都需要跟其他的选择器（标签选择器）组合起来使用

$("li:first").html()li:下的第一个元素

$("li:last").html()  li:下的最后一个元素

$("li:even").html() li下的偶数的

$("li:odd").html()  li 下的奇数的

$("li:eq('1')") li第一个li元素

$("li:gt('2')") li下的大于2的元素

$("li:lt('2')")  li下的小于2的元素

$("li:not(li:eq(3))")li下的不等于3的元素

内容选择器：

li:empty()li下的元素为空的

li:contains(‘北京’)li下的包含北京的元素

li:has('a') li下的有a标签的元素

可见选择器：

 ：visible() 可见的

 ：hidden()隐藏的

属性和方法的操作：

$("input").attr('value')获得input框的value值

$("input").attr('value','name')给value属性赋值为name

$("input").removeattr('value') 移除input 框的value属性

 class的操作

$("#d1").addClass('p')给d1的元素添加p的样式（需要提前写好p的样式，如：.p{color:red}）;

$("#d1").removeClass('p')移除class样式

$("#d1").toggleClass('p')切换class样式

css样式的操作：

$("#d1").css("color","red");添加单个的css样式

$("#d1").css({

color:'red',

border:"1px solid blue",

})添加多个css样式

宽度，高度的设置：

 $("#d1").width(value);

$("#d1").heigth();

value传递的是整型的数据，没有px

$("#d1").html()含有标签

$("#d1").val()值得操作

还可以写成：$("#d1").attr('value')

jquery对象和dom对象的相互转化

jquery对象转化为dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。可能有人会觉得奇怪，怎么是用下标呢，没错，jquery对象就是一个数组对象.
下面代码将演示一个jquery对象转换成dom对象，再使用dom对象的方
var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中
dom对象转换成jquery对象
对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);
var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对像
转换后可以任意使用jquery中的方法了.

平时用到的jquery对象都是通过$()函数制造出来的，$()函数就是一个jquery对象的制造工厂.
建议:如果获取的对象是 jquery对象，那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象

一定要注意，

写的js、jquery写的代码要单独用script标签封装起来，而不是和引入文件的script标签一起使用，否则写的js和jquery代码将不会执行

 a = $("input:eq("+i+")").attr("checked");  循环的时候变量和字符串一定要用++连接

$(this).children("li")，

表示获取当前元素下所有标签为<li>的子元素。而$("this")是选中this这个标签

获取$(this)子节点对象的方法：find(element)

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。

jquery对象是一个数组类的对象，及每一个数组的下表对应一个对象