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

属性、表单过滤器
属性过滤选择器：
$(“div[id]”)选取有id属性的

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

还可以选择开头【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 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 =$(“http://www.baidu.com‘>百度”);
$(“div:first”).append(link);$()创建的就是一个jQuery对象，可以完全进行操作
var link = $(“http://www.baidu.com‘>百度”);
link.text(“百度”);
$(“div:first”).append(link);。 创建radio，使用$(‘’);，而不要在创建好后通过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’);
});
=====================================权限选择============================

添加
删除
修改
查询
打印

” style=”width: 50px;” id=”toRight” />

>” style=”width: 50px;” id=”toAllLeft” />

补充
写代码的好习惯，{、(写完开始就写结束，省得忘了。，在jQuery中这样写就不容易写错了。
如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。jQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。
注意不同jQuery版本的区别。

节点操作
替换节点：
$(“br”).replaceWith(“

---

”);
用

---

替换br
$(‘ ’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。 用 元素替换所有的hr 红色为选择器；蓝色为要替换的内容（动态创建的元素）。 包裹节点： wrap()方法用来将所有元素逐个用指定标签包裹：【wrapAll()】$(“p”).wrap(“ ”) 将所有粗体字红色显示
结果：

wrapInner()//在内部围绕

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

练习：网页开关灯的效果

.dark
{
background-color:Black;
}


$(function() {$("#btn").click(function() {
$("body").toggleClass("dark");
});
});

转载于 奕网情深 http://www.91ywqs.com/news_show-123.html?ref=myread