jquery基础

satya1

于 2018-03-16 22:13:06 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_41042671/article/details/79587605

版权

jquery

例子

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

拿到对象

const result = $(“p”)
result.length——3

innerText—text()

innerHtml—html()

append()—把小弟加到尾部

prepend()—把小弟加到顶部

appendTo()—--加入到大哥尾部

prependTo()—加入到大哥的顶部

remove()——灭了他

实例操作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>
    <div class="box1">
      <h1> i like u</h1>
    </div>

    <hr>

    <div class="box1">
      <h1> i like baby</h1>
    </div>

    <script type="text/javascript">

//原始dom方法 需要循环去赋值
    function dom_text_html_test(){
      // const h1s = document.querySelectorAll(".box1>h1");
      // console.log(h1s);
      // h1s[0].innerText = "i hate u ";
      // h1s[1].innerText = "i hate u too";

      document.querySelectorAll(".box1>h1").forEach(function(h1){
        h1.innerHTML = `<span>i don't like u uuu</span> dear`
      })
    }

//jquery对象，一次性赋值 更简洁
    function jq_text_html_test2(){
      $(".box1>h1").html("<span>i don't like u uuu</span> dear");
    }

//jquery test() html()方法实例
    function jq_text_html_test(){
      //text() html() 查看dom
      console.log($(".box1").text());
      console.log($(".box1 >h1").html());
      // 返回 i like u

      console.log($(".box1").html());
      // 返回<h1> i like u</h1>

        //text() html() 改变dom

      $(".box1 >h1").text("i don't like u ");
      // 界面变成 i dont like u
      // .text如果里面有标签不会被解析成标签当成字符

      $(".box1 >h1").text("<span>i don't like u uuu</span>");
      //界面变成 <span>i don't like u uuu</span>
      $(".box1 >h1").html("<span>i don't like u uuu</span>");
      //界面变成 i don't like u

    }


//append prepend
    function append_prepend(){
      let child1 = $("<p>child1</p>");
      $(".box1").append(child1);
      let domcreat1 = document.createElement("input");
      $(".box1").append(domcreat1,"<p>11111</p>","<p>2222</p>");
      $(".box1").prepend(domcreat1,"<p>11111</p>","<p>2222</p>");

    }

    append_prepend();

//appendTo()  prependTo()
      function appendTo_prependTo(){
        $("<h3>childh3appendTo</h3>").appendTo($(".box1"));
        $("<h3>childh3prependTo</h3>").prependTo($(".box1"));
      }

      appendTo_prependTo();

      $("h1").remove();


    </script>

  </body>
</html>

replaceAll—替换

replaceWith 用什么替换

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>

    <h1>我不想写</h1>
    <h1>我不想起床</h1>


    <script type="text/javascript">
    //replaceAll替换什么
    // $("<input>").replaceAll("h1");
    // $("<input>").replaceAll("h1:nth-child(1)");

    //replaceWith() 用什么来替换自己
    // $("h1").replaceWith("<textarea>");
    // $("h1:nth-child(2)").replaceWith("<textarea>");

    // 采用下坐标后是纯dom对象 需要再转成jquery才可以用 replaceWith
    $($("h1")[0]).replaceWith("<textarea>");

    </script>

  </body>
</html>

children() 得到一层的子对象 dom对对象，像树型，

例子

<div class="main">
      <div class="sub">
        <div class="sub2">

        </div>

      </div>
      <div class="sub1">

      </div>

    </div>

      console.log($(".main").children().length);
      console.log($(".main").children()[0]);
      console.log($(".main").children()[1]);

查询：

通过下坐标result[0]拿到的值是原始的dom对象

eq(index) 根据index得到结果中的对象，是在result[0]的外部封装了jquery。可以享受到jquery 的API

is(selector) 判断是否有这个选择器的 dom 返回boolean

slice(start, end) 返回一个封装好的新的jquery对象，

p.slice(1,3) —>[p2,p3]

each()—同数组同名用法

find(selector) 在当前jquery中通过选择器查找，

next()—下一个

prev()—前一个

parent()—上层

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>


  </head>
  <body>


    <p>a
      <span class=".icon">span1</span>
      <span class=".icon">span1
        <span class=".icon">span1111</span>
      </span>
      <span class=".icon">span1</span>
      <span class=".icon">span1</span>


    </p>
    <p>b</p>
    <p>c
      <span class=".icon">span2</span>
      <span class=".icon">span2</span>
      <span class=".icon">span2</span>


    </p>
    <p class="sub">d</p>


    <script type="text/javascript">
// eq(index)
    console.log($("p")[0]);//dom对象
    console.log($("p").eq(0));//jquery对象 wrap {dom}


// is(selector)
    console.log($("p").is(".sub"));//true


//slice(start,end)
    console.log($("p").slice(1,3).length);//2


//each()
    // 查看有几个实参
    $("p").each(function(){console.log(arguments)});
    // 返回 4个p的dom对象
    $("p").each(function(index,dom){console.log(dom)});


// find(selector) 找内部匹配的元素
    console.log($("p").find("span").toArray());


// children() 返回第一层子元素
    console.log($("p").children().toArray());


// next() 同级下一个
// prev()同级上一个


    // $("p:nth-child(3)").next().css("background-color","blue");
    // $("p:nth-child(2n+1)").next().css("background-color","blue");
    $("p:nth-child(2n+1)").next().prev().css("background-color","blue");


// parent()上级
    $("p").parent().css("background-color","#f6f6f6");


    </script>


  </body>
</html>

Dom属性操作

val() 表单元素的值

attr() 属性

css() 读写样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style media="screen">
      input{
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <input type="text" name="" value="">
    <select class="" name="">
      <option value="AA">AA</option>
      <option value="BB">BB</option>
      <option value="CC">CC</option>

    </select>
    <button type="button" name="button" data-custom = "i">读取</button>
    <button type="button" name="button" data-custom = "u">重置</button>

    <script type="text/javascript">

    // val()即可读又可写

      function readFormData(){
        console.log("input value 为 ",$("input").val());
        console.log("select value 为 ",$("select").val());
      }
      // dom事件
      $("button")[0].onclick = readFormData;
      $("button")[1].onclick = function updateData(){
        $("input").val("请输入");
        $("select").val("CC");

      };

      // attr() 读写属性
      // 读属性只返回了第一个
      console.log($("button").attr("data-custom"));
      // 写可以全部更改
      $("button").attr("data-custom","all");
      //其他方式全部读取出来
      let attris=[];
      $("button").each(function(index,dom){
        attris.push($(dom).attr("data-custom"));

      });
      console.log(attris);


      // css()  读写样式
      console.log($("input").css("background-color"));
      // 写
      $("input").css("background-color","yellow");
      //多种写法
      $("input").css("background-color","yellow")
      .css("outline","none")
      .css("border","2px solid red");
      //多个值还可以用对象的写法 名字驼峰写法要
      $("input").css({
        backgroundColor:"gray",
        color:"red"
      })
    </script>

  </body>
</html>

addClass() —加class

removeClass()—删除class

hasClass()—判断是否有class

toggleClass()— 开关，有这个class会删除，没有会添加这个 class

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <style media="screen">
      .comm-bg{
        background-color: #333;
      }

      .comm-color{
        color:white;
      }

      .comm-font-size{
        color:#eee;
      }
    </style>
  </head>
  <body>

    <input type="text" name="" value="">
    <select class="" name="">
      <option value="AA">AA</option>
      <option value="BB">BB</option>
      <option value="CC">CC</option>

    </select>
    <button type="button" name="button" data-custom = "i">读取</button>
    <button type="button" name="button" data-custom = "u">重置</button>

    <script type="text/javascript">

    $("input").addClass("comm-bg comm-color comm-font-size");
    console.log($("input").hasClass("comm-color"));
    $("input").removeClass();
    console.log($("input").hasClass("comm-color"));

    $("input")[0].onclick = function (){
      $("input").toggleClass("comm-bg");//开关
    }
    </script>


  </body>
</html>

基本用法是这些，对象操作看我其他文章。

satya1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基础

jquery例子 &lt;p&gt;p1&lt;/p&gt; &lt;p&gt;p2&lt;/p&gt; &lt;p&gt;p3&lt;/p&gt;拿到对象const result = $(“p”)result.length——3innerText—text()innerHtml—html()append()—把小弟加到尾部prepend()—把小弟加到顶部appendTo...
复制链接

扫一扫