jquery基本操作

Posted 2021-02-05 1234wu

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>