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

更新时间:2016-04-29 09:39:18 点击次数:2428次

属性、表单过滤器
属性过滤选择器:
$("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 style=" margin-left:400px; margin-top:10px;">
    <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se1">
        <option>添加</option>
        <option>删除</option>
        <option>修改</option>
        <option>查询</option>
        <option>打印</option>
    </select>
    <div style="width: 50px; float: left; ">
        <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
        <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
        <input type="button" name="name" value=">>" style="width: 50px;" id="toAllLeft" />
        <input type="button" name="name" value="<<" style="width: 50px;" id="toAllRight" />
    </div>
     <select multiple="multiple" style="float: left; width: 40px; height: 100px;" id="se2">
     </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> 

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!