jquery基本操作

1.jQuery的基本操作;

  1) innerhtml和innertext

    修改:innerhtml可以放html片段,并且可以解析;

       innertext可以放html片段,但是不会解析;

    访问:innerhtml是访问一串html代码;

       innertext是访问标签中的内容;

<script>var city = document.getElementById("city"); console.log(city.innerHTML); console.log(city.innerText); city.innerText = "<li>你好</li>";</script>

  

  2) val()     

     封裝原生的value屬性      主要是用於表單元素

  

  3) attr()

     可以设置一个属性,也可以设置多个属性 

$("#city").attr("class","d1")   //设置一个$("#city").attr({         //设置多个 "name" : "zhangsan", "age" : "30"    })
console.log($("#city").attr("class"))   //不传递参数就是访问
$("#city").removeAttr("class")    //删除指定的属性

 

2.样式操作

  1) attr()方法

//   <button id="btn1">attr()方法</button>
$("#btn1").click(function(){ $("#div1").attr({ class : "one" }) })

  

  2) 追加样式: addClass(" ")

 

//<button id="btn2">追加样式</button> $("#btn2").click(function(){ $("#div1").addClass("two") })

 

  3) 删除样式:removeClass()

//<button id="btn3">删除样式</button> $("#btn3").click(function(){ $("#div1").removeClass() //如果不传递参数就是删除所有,  $("#div1").removeClass("two") //传递参数就是删除某个 }) 

  

  4) 切换样式: toggleClass(" ") 

 

//<button id="btn4">切换样式</button> $("#btn4").click(function(){ //如果有这个样式就删除,如果没有就增加 $("#div1").toggleClass("two") }) 

 

  5) 判断样式: hasClass(" ")

// <button id="btn5">判断样式</button> $("#btn5").click(function(){ console.log($("#div1").hasClass("two")) //判断这个样式是否存在在这个dom上面 })

  

  6) css( ) 方法

    取得第一个段落的color样式属性的值。

$("p").css("color");    

    将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css({ "color": "#ff0011", "background": "blue" });   

    将所有段落字体设为红色

$("p").css("color","red");

    逐渐增加div的大小

$("div").click(function() { $(this).css({ width: function(index, value) { return parseFloat(value) * 1.2; }, height: function(index, value) { return parseFloat(value) * 1.2; } }); });

 

3.创建节点 

<ul> <li>北京</li> <li>天津</li> <li>南京</li></ul> <script>// 原生的dom// 创建一个武汉节点,加入到ul中 var $li = $("<li></li>"); $li.text("武汉"); $li.attr("id","wuhan");// 2.添加到ul中 $("ul").append($li) //内部插入 </script>

 

4.遍历节点

<ul id="city" name="城市列表"> <li>北京 <ul> <li>海淀区</li> <li>朝阳区</li> </ul> </li> <li>天津</li> <li>上海</li> <li>重庆</li> <li>南京</li></ul>

 

  1) 所有子元素:children()

    获取第一个ul元素中所有子元素的个数

console.log($("ul:first").children().length)

  

  2) 获取第N个元素:get([index])

    获取ul元素中的第三个子元素的文本

console.log($("ul:first").children(":eq(2)").text())console.log($("ul:first").children().get(2).innerText)console.log($("ul:first").children()[2].innerText)console.log($($("ul:first").children().get(2)).text())

  

  3) 父元素:parent()

    获取上海这个元素的父元素的name属性

console.log($($("ul:first").children().get(2)).parent().attr("name"))

  

  4) 兄弟元素:prev(),next()

    获取上海这个元素的上一个兄弟元素和下一个兄弟元素

console.log($("ul:first").children(":eq(2)").prev().text())console.log($("ul:first").children(":eq(2)").next().text())

  

  5)同辈元素:siblings()

    获取上海这个元素的兄弟元素的所有个数

console.log($("ul:first").children(":eq(2)").siblings().length)    

    找到每个div的所有同辈元素中带有类名为selected的元素。

<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>

$("div").siblings(".selected")// <p class="selected">Hello Again</p>

 

  6)所有与指定表达式匹配的元素:find()

     获取ul中所有的li的个数

console.log($("ul li").length)console.log($("ul").find("li").length)

 

5.内部插入

  1) append(content|fn) 

    把后面的东西插入到了前面的子节点中(追加)

$("#tj").append($("#xj"))

  

  2)appendTo(content)

    把前面的东西插入到了后面的子节点中(追加)

$("#tj").appendTo($("#xj")) 

  

  3) prepend(content|fn) 

    把后面的东西插入到了前面的子节点中(前面插入)

$("#tj").prepend($("#xj"))

  

  4)prependTo(content)

    把前面的东西插入到了后面的子节点中(前面插入)

$("#tj").prependTo($("#xj")) 

 

6.外部插入

  1) after(content|fn) 

    把后面的插入到了前面的下一个兄弟的位置

$("#tj").after($("#xj")) 

  

  2) before(content|fn) 

    把后面的插入到了前面的上一个兄弟的位置

$("#tj").before($("#xj")) 

 

  3) insertAfter(content) 

    把前面的插入到了后面的下一个兄弟

$("#tj").insertAfter($("#xj")) 

  

  4) insertBefore(content) 

    把前面的插入到了后面的上一个兄弟的位置

$("#tj").insertBefore($("#xj"))

 

7.删除节点

  empty() 谋杀式的

  remove([expr])   自杀式

<body> <ul id="city"> <li id="bj">北京</li> <li id="tj">天津</li> <li id="sh">上海</li> </ul> <script>// var sh = document.getElementById("sh");// console.log(sh.remove()) //这个是没有返回值的 自杀式// var city = document.getElementById("city");// console.log(city.removeChild(sh)) //这个是相当于剪贴操作 谋杀式       empty() //谋杀式的   $("#sh").empty()       remove([expr]) //自杀式 $("#sh").remove(); </script> </body>

 

8.替换节点

  replaceWith(content|fn): 将所有匹配的元素替换成指定的HTML或DOM元素
  replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素

$("p").replaceWith($("<button>按钮</button>")) //把p换成按钮$("<p>这是一个段落.</p>").replaceAll($("button")) //把所有的按钮换成p

 

9.复制节点

  clone([Even[,deepEven]])

    克隆匹配的DOM元素并且选中这些克隆的副本

<body> <button>按钮</button> <p>这是一个段落.</p> <script> $("button").click(function(){ console.log("hello world") }) $("button").clone(true).appendTo($("p")) //注意true的作用,表示事件是否会被克隆 </script></body>

 

相关文章