jQuery编程基础精华02，属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*，追加方法，节点，样式操作

属性、表单过滤器

属性过滤选择器：

$("div[id]")选取有id属性的<div>

$("div[title=test]")选取title属性为“test”的<div>，jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

$("div[title!=test]")选取title属性不为“test”的<div>

还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复合。【[属性1=a][属性2=b]…】（*）

表单对象属性选择器（过滤器）：

$("#form1 :enabled")选取id为form1的表单内所有启用的元素

$("#form1 :disabled")选取id为form1的表单内所有禁用的元素

$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.

$("select :selected")选取所有选中的选项元素（下拉列表）

===================================================================

//$("#form1:enabled"); //不加空格表示的是,所有启用的表单,这样就变成过滤器了

//$("#form1 :enabled"); //加空格表示的是先选取这个表单,表单下所有启用的元素

===================================================================

元素的each

$(function () {

$('#dv input[type=checkbox]').click(function () {

var checks = $('#dv :checked');

var len = checks.length;

var arr = [];

checks.each(function (k, v) {

arr[arr.length] = $(v).val();

});

$('#msgNames').text('共选中了' + len + '内容为' + arr.toString());

});

});

表单选择器

$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

:input比input级别高,包含input texarea select button

$(":text")选取所有单行文本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

$(“:password”)选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(‘input[type=***]’);

其他过滤器(*)

内容过滤器：

:contains(text),过滤出包含给定文本的元素。(innerText中包含。)

:empty,过滤出所有不包含子元素或者文本的空元素。

:has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。

:parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。）

========================================================================

//$('div:contains(x)').css('backgroundColor', 'blue'); //包含字母x的背景色为蓝色

//$('div:empty').css('backgroundColor', 'blue'); //div中没有任何元素(文本)背景为蓝色

//$('div:has(a)').css('backgroundColor', 'blue');//所有div中包含a标签的div背景为蓝色

//$('div:parent').css('backgroundColor', 'blue');//有子元素为父元素的背景为蓝色

子元素过滤器(*)

:first-child,与:fisrt的区别,:first只能选取第一个，而:first-child，则能选取每个子元素的第一个元素。

$(‘ul li:first’);只返回一个li元素。

$(‘ul li:first-child’);//为每个父元素（ul）都返回一个li。

:last-child

:only-child,匹配当前父元素中只有一个子元素的元素。

:nth-child,对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。

:nth-child(index),index从1开始。

:nth-child(even)

:nth-child(odd)

:nth-child(3n),选取3的倍数的元素

:nth-child(3n+1),满足3的倍数+1的元素。

.children()方法,只考虑子元素，不考虑后代元素。

===========================================================================

//$('ul li:first').css('backgroundColor', 'red'); //表示的是获取所有的li中的第一个

//$('ul li:first-child').css('backgroundColor', 'red');//表示的是所有ul中第一个li

//$('ul li:nth-child(2)').css('backgroundColor', 'red');//表示的是所有ul中第二个li

jQuery的Dom操作

1、使用html()方法读取或者设置元素的innerHTML：

alert($("a:first").html());//innerHTML

$("a:first").html("hello");

2、使用text()方法读取或者设置元素的innerText：

alert($("a:first").text());

$("a:first").text("hello");

3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

alert($("a:first").attr("href"));

$("a:first").attr("href", "http://www.rupeng.com");

attr({‘key’:’value’,’k’:’v’});

4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)

========================================================================

$('#chk').attr('checked', 'true');//jq中让checkbox选中

$('#chk').attr('class', 'cls'); //jq中为checkbox添加类样式

$('#chk').attr('class', ''); //这么写属性还有

$('#chk').removeAttr('class');//这么写属性是真的移除了

动态创建Dom节点

使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中：

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

$()创建的就是一个jQuery对象，可以完全进行操作

var link = $("<a href='http://www.baidu.com'>百度</a>");

link.text(“百度");

$(“div:first”).append(link);。

创建radio，使用$(‘<input name=“”/>’);，而不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。

append方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子)

prepend，在元素的开始添加元素（第一个子节点）。增加元素开始(儿子)

after，在元素之后添加元素（添加兄弟）增加元素后面(兄弟)

before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟)

其他追加方法(将自己追加到某元素)

子元素.appendTo(父元素);//主动巴结!到最后一个

子元素.prependTo(父元素);//主动巴结到第一个。

(*)A.insertBefore(B);将A加到到B的前面，等同于B.before(A);

(*)X.insertAfter(Y);将X加到到Y的后面，等同于Y.after(X);效果都一样

删除节点

empty();

清空某元素下的所有子节点

内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样。

remove(selector)

删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下：

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

参数expr,是一个选择器，如果没有选择器，表示把选中的元素删掉，如果有选择器则表示在选中的元素中，再过滤出expr匹配的元素删除掉。

案例：清空ul中的项，代码见备注。$("ul li.testitem").remove(); 删除ul下li中有testitem样式的元素。

权限选择：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1 option:selected”).appendTo($(“#select2”))；//在jQuery1.4.1下不太一样。

=====================================================案例=============================================

$(function () {

$('#btn1').click(function () {

$(‘div’).empty();//div里面内容没了

});

$('#btn2').click(function () {

//$(‘div’).remove();//div没了

$(‘div’).remove(‘.cls’);//应用这个类样式的div删了

});

});

================================empty和remove=================================

$('#toRight').click(function () {

$('#se1 option:selected').appendTo('#se2');

});

$('#toLeft').click(function () {

$('#se2 option:selected').appendTo('#se1');

});

$('#toAllLeft').click(function () {

$('#se1 option').appendTo('#se2');

});

$('#toAllRight').click(function () {

$('#se2 option').appendTo('#se1');

});

=====================================权限选择============================

<div >

<select multiple="multiple" >

<option>添加</option>

<option>删除</option>

<option>修改</option>

<option>查询</option>

<option>打印</option>

</select>

<div >

<input type="button" name="name" value=">" />

<input type="button" name="name" value="<" />

<input type="button" name="name" value=">>" />

<input type="button" name="name" value="<<" />

</div>

<select multiple="multiple" >

</select>

</div>

======================================================================

补充

写代码的好习惯，{、(写完开始就写结束，省得忘了。，在jQuery中这样写就不容易写错了。

如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。jQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。

注意不同jQuery版本的区别。

节点操作

替换节点：

$("br").replaceWith("<hr/>");

用<hr/>替换br

$(‘<br/>’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。

用<br/>元素替换所有的hr

红色为选择器；蓝色为要替换的内容（动态创建的元素）。

包裹节点：

wrap()方法用来将所有元素逐个用指定标签包裹：【wrapAll()】

$(“p”).wrap(“<font color=‘red’></font>”) 将所有粗体字红色显示

结果：<font color=‘red’><p></p></font>

wrapInner()//在内部围绕

样式操作

获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")

练习：网页开关灯的效果

<style type="text/css">

.dark

{

background-color:Black;

}

</style>

<script type="text/javascript">

$(function() {

$("#btn").click(function() {

$("body").toggleClass("dark");

});

});

</script>