首页 > Web开发 > 详细

jquery基本操作

时间:2019-01-24 01:02:23      阅读:167      评论:0      收藏:0      [点我收藏+]

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>

 

jquery基本操作

原文:https://www.cnblogs.com/1234wu/p/10268903.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!