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

一、jQuery下载

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

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

二、强大的选择器

1、基本选择器（重点）

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

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

?Element表示选择指定的标签

?selector1,selector2匹配多个选择器

2、层级选择器（重点）

?ancetor descendant表示ancetor所有的后代元素（不分层级）

parent > child表示父子关系的选择器（跨一级，必须是父子关系）

?prev + next表示当前元素同级相邻元素

?prev~siblings表示当前元素同级的兄弟元素

 

3、简单选择器

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

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

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

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

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

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

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

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

?:not(selector) 选取非指定选择器的元素

4、内容选择器

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

?:empty 选择为空的元素

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

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

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(name,value) 给指定的css做相应的设置

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

宽高尺寸的设置

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

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

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

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

文本的操作

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

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

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

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

 

值的操作

?val() 表示获取选择器的value，inputselect指的是value值

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

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

总结：

类(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>

简单选择器：

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

$("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')

Each使用

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

functioncallback(index,element){

}

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

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