jquery入门2

最新推荐文章于 2018-02-28 10:38:05 发布

信天鸽

最新推荐文章于 2018-02-28 10:38:05 发布

阅读量213

点赞数

分类专栏： JavaScript(js) 文章标签： jquery

本文链接：https://blog.csdn.net/chaoleshan/article/details/78045271

版权

JavaScript(js) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、创建节点
var $div5=$ (‘div id=div5>< div5>’);
$(“div2”).after(“div5”);

二、插入节点
1.插入同级节点（兄弟元素）
$(“p”).after(“< b>你好< b/>) insertafter和after相反还有insertBefore()和before（） 2.插入子级元素 append(）向每个匹配的元素内容追加内容 appendTo()和append()相反 prepend()向每个匹配的元素内部前置内容 prependTo()和prepend() 三、节点移动$ (“ul li eq(2)”).insertAfter(“ul li:eq(0)”);
四、移除节点
1、remove() 删除
2.empty()清空
wu.克隆节点
clone();
3.replacewith() 替换
4.创建一个文本域，移除按钮换行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){

                var i = 0 ;
                //给btn1绑定事件
                $("#btn1").click(function(){



                    //点击以后
                    //创建一个文件域、 移除按钮、换行
                    var $file = $('<input type="file"  value="上传" />');
                     var  $button=$('<input type="button" id="btn1" value="增加" />');
                    var removeBtnStr = '<input type="button" name="btn1" id="btn1" value="remove ' + (++i)+ '" />'
                    var $removeButton = $(removeBtnStr);
                    var $br = $("<br/>");

                    $removeButton.click(function(){
                        $file.remove();
                        $removeButton.remove();
                        $br.remove();
                        $button.remove();
                    });

                    $("#div1").append($file).append($button).append($removeButton).append($br);






                });
            });
        </script>
        </script>
    </head>
    <body>

        <input type="button" id="btn1" value="增加" />
        <input type="file" name="file" id="file" value="上传文件" />
        <div id="div1">

        </div>
    </body>
</html>

5.节点包裹

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                 var $btn1=$("#btn1");

                 $btn1.click(function(){

                    /*$("strong").wrap("<b></b>");*/
                    $("strong").wrapAll("<b></b>");
                 })
            })
        </script>
    </head>
    <body>
        <strong>我是谁？</strong></br>
        <strong>我是你</strong>
        <input type="button" name="btn1" id="btn1" value="加粗" />
    </body>
</html>

五、遍历子元素和兄弟元素
children()
遍历兄弟节点
下一个 next() 下面全部nextAll()
上一个 prev() 上面全部 prevall()
父亲节点
1.parent()
2.parents()
六、属性操作
1.attr()获取设置属性
对象.attr();获取属性
对象.attr(“name”,”zzz”);获取并修改属性
对象.attr(“name”,”zzz”,”value”:”333”) 获取多个属性并进行修改
2.移除属性
removeAttr(“属性名”)
七、样式操作
修改单一样式
对象.css(“color”,”red”);
可以接受Json对象来同时修改多个属性
对象.css{“background-color”:”yellow”;”color”:”red”}
八、重点：disabled属性规定应该禁用input元素，被禁用的input元素既不能用，也不能被点击
可以通过同意注册来显示disabled的作用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <script src="../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
     $(function(){
        var $agree = $("#agree");
        var $btn1=$("#btn1");
        $agree.click(function(){
            if($agree.prop("checked")==true){
                $btn1.removeAttr("disabled");
            }else{
                $btn1.attr("disabled","disabled");
            }
        })
     })
    </script>
    </head>
    <body>
        同意协议<input name="agree" id="agree" type="checkbox"/>
        <input type="button" name="btn1" id="btn1" value="注册" disabled="disabled" />
    </body>
</html>