jquery入门2

来源：互联网发布：js给a标签的href赋值编辑：程序博客网时间：2024/06/06 07:17

一、创建节点
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>

修改整套样式
和dom修改的方法一样
1.修改
对象.attr(“class”,”class2”);
2.增加addclass()
3.移除removeclass()
4.样式替换 toggleclass()
5.hasclass()或is()来判断是否含有样式

阅读全文

0 0