34 jQuery

锦沐karas
142 阅读4分钟

1 jQuery介绍

jQuery是流行的JavaScript程序库，是对JavaScript对象和函数的封装。那么jQuery可以完成：

  • 访问和控制DOM元素
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的jQuery插件
  • 与Ajax技术结合

简单来说jQuery是对JavaScript的高度压缩，而jQuery的优势表现在：

  • 体积小

  • 强大的选择器

  • 出色的DOM封装

  • 可靠的事件处理机制

  • 出色的浏览器兼容性

2 jQuery的使用

使用jQuery只需要将对应的js文件引入即可，使用传统的引入js的方式：

<script src="jquery-3.4.1.min.js"></script>

基本语法介绍，jQuery语法格式是：

 <script>
        $(selector).action();
    </script>

其中：

  • 工厂函数$()：将DOM对象转换为jQuery对象，这样就可以使用jQuery的函数
  • 选择器selector：获取需要操作的DOM元素
  • 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法$等同于jQuery

实例：

<body>
    <p>hello,jQuery</p>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        alert($("p").text());
    </script>
    
</body>

3 jQuery对象和DOM对象之间的转换

DOM对象和JQuery对象各自都有一套独立的方法，因此不能混用。

$("#title").html();
doucument.getElementById("title").innerHTML;
//上面两个是等同的

如果相混用，就必须进行转换：

  • DOM对象转jQuery对象

    var a=doucument.getElemetById("name"); //a是DOM对象
var b=$(a); //此时DOM对象就被转换为jQuery对象b

  • jQuery对象转DOM对象

    var a=$("#name");//a是jQuery对象
var b=jqObject.get(a);//此时a就被转换为DOM对象b

4 jQuery选择器

jQuery选择器包括基本选择器、层次选择器、属性选择器以及过滤选择器，下面我们就一一介绍。

4.1基本选择器

基本选择器就包括：标签选择器、类选择器、ID选择器、并集选择器、交集选择器以及全局选择器。

名称语法描述示例
标签选择器element根据给定标签名匹配元素$("h1")选取所有h1标签元素
类选择器.class根据给定的类名选择元素$(".title")选取类名是title的所有元素
ID选择器#id根据给定的id选择元素$(".name")选取id为name的元素
并集选择器selector1,selector2...将每一个选择器匹配的元素合并后返回$("div,p,.title,#name")选取所有div、p、类名是title以及id为name的元素
交集选择器element.class或element#id匹配指定class或id的某元素或元素集合$("h2.title")选取所有拥有类名为title的h2元素

基本选择器的实例：

<body>
    <p>java</p>
    <p>python</p>
    <p class="jia">blue souls</p>
    <p id="ao">javascript</p>
    <h3 class="es">es6</h3>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("p").css("color","red");
        $(".jia").css("color","red");
        $("#ao").css("color","red");
        $(".jia,#ao").css("color","red");
        $("h3.es").css("color","blue");
		</script>
    
</body>

4.2 层次选择器

名称语法描述示例
后代选择器ancestor descendant选择ancestor元素里的所有descendant元素(后代元素)$("#menu span")
子代选择器parent>child选择所有parent元素下的子代元素child$("#menu>span")
相邻元素选择器prev+next选择紧邻prev元素之后的下一个元素$("h2+dl")
同辈元素选择器prev~siblings选择prev元素之后的所有siblings元素(选择后面的所有同辈元素)$(h2-dl)

实例：

<body>
    <h3>aoo</h3>
    <div id="a">
        boo
        <p>coo</p>
        <div>
            <p>doo</p>
        </div>
    </div>
    <h3>233</h3>
    <h3>333</h3>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        // $("#a p").css("color","blue");
        // $("#a>p").css("color","blue");
        // alert($("#a+h3").text());
        $("#a~h3").css("color","red");




    </script>
    
</body>

4.3 属性选择器

名称语法描述示例
属性选择器[attr]选择包含给定属性的元素$("[href]")选择有href属性的元素
属性选择器[attr=value]选择包含属性且值为给定值的元素$("[href='#']")选择href属性值为#的元素
属性选择器[attr!=value]选择包含属性且不为给定值的元素$("[href!='#']")选择href属性值不为#的元素
属性选择器[attr^=value]选择给定属性是以某些特定值开头的元素$("[href^='en']")选择href属性值以en开头的元素
属性选择器[attr$=value]选择给定属性是以某些特定值结尾的元素("[href("[href='en']")选择href属性值以en结尾的元素
属性选择器[attr*=value]选择给定的属性以包含某些值的元素$("[href*='txt']")选择href属性值中包含txt的元素
属性选择器[ a] [ b] [c]选择满足多个条件的复合属性的元素$("li[id] [tilte='新闻']")选择含有id和title属性为新闻的li元素

实例：

<body>
    <a href="www.java.com">java</a>
    <a href="www.java.cn">python</a>
    <a href="http://go.com">javascript</a>
    <p href="x">哈哈</p>
    <p href="x" title="x">哈哈哈</p>


    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("[href]").css("color","blue");
        $("[herf='x']").css("color","blue");
        $("[href!='x']").css("color","blue");
        $("[href^='www']").css("color","blue");
        $("[href$='com']").css("color","red");
        $("[href*='a']").css("color","black");
        $("p[href][title='x']").css("color","red");

       




    </script>
    
</body>

4.4 过滤选择器

语法格式描述示例
:first选择第一个元素$("li:first")选择li元素中的第一个
:last选择最后一个元素$("li:last")选择li元素中最后一个
:even选择索引是偶数的所有元素(index从0开始)$("li:even")选择索引是偶数的li元素
:odd选择索引是奇数的所有元素(index从0开始)$("li:odd")选择索引是奇数的li元素
:eq(index)选择索引等于index的元素$("li:eq(2)")选择索引等于2的li元素
:gt(index)选择索引大于index的元素$("li:gt(2)")选择索引大于2的li元素
:lt(index)选择索引小于index的元素$("li:gt(2)")选择索引小于2的li元素

实例：

<body>
    <ul>
        <li>小米</li>
        <li>华为</li>
        <li>魅族</li>
    </ul>


    <script src="jquery-3.4.1.min.js"></script>
    <script>
    $("li:first").css("color","blue");
    $("li:last").css("color","red");
    $("li:even").css("color","blue");
    $("li:odd").css("color","blue");
    $("li:eq(1)").css("color","red");
    $("li:gt(0)").css("color","red");
    $("li:lt(2)").css("color","red");
		</script>
    
</body>

5 事件

5.1 鼠标事件

当用户在文档上移动或单击鼠标时触发的事件，常用鼠标事件：

方法描述触发
click()将函数绑定到指定元素的click事件单击鼠标时
mouseover()将函数绑定到指定元素的mouse over事件鼠标移过时
mouseout()将函数绑定到指定元素的mouse out事件鼠标移出时

实例：

<body>
   <img src="pig.jpeg" width="300">
   <img src="pig.jpeg" width="300">
   <img src="pig.jpeg" width="300">

    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("img").click(function(){
            $(this).attr("src","blue.webp");

        });
        $("img").mouseover(function (){
            $(this).css("border","2px solid red");

        });
        $("img").mouseout(function(){
            $(this).css("border","2px solid white");

        });
    


    </script>
    
</body>

5.2 键盘事件

键盘上常用的事件有：

方法描述触发
keydown()将函数绑定到指定元素的keydown事件按下键盘
keyup()将函数绑定到指定元素的keyup事件释放键盘
<body>
    <input >
    <h3></h3>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("input").keyup(function(){
            var str=$(this).val();
            $("h3").text(str);

        });
    

    </script>
    
</body>

5.3 表单事件

当元素获得焦点时，会触发focus事件，失去焦点，触发blur事件，实例如下：

<body>
    <form action="">
        <p>账号：<input id="name" value="请输入账号..."></p>
        <p>电话：<input id="b"></p>
    </form>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
       $("#name").focus(function(){
           $(this).val("");

       });
       $("#name").blur(function(){
           $(this).val("请输入账号...");

       });
    

    </script>
    
</body>

5.4 鼠标悬停复合事件

hover()方法相当于mouseover和mouseout事件的组合：

<body>
    <img src="blue.webp" width="400">

    <script src="jquery-3.4.1.min.js"></script>
    <script>
      $("img").hover(function(){
          $(this).css("border","5px solid red");

      },
      function(){
        $(this).css("border","5px solid white");

      }
      );
    

    </script>
    
</body>

5.5 连续点击复合事件

toggle()除了可以模拟鼠标的连续单击事件

<body>
    <h2>编程思想</h2>
    <ul>
        <li>java</li>
        <li>java1</li>
        <li>java2</li>
    </ul>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
     $("h2").click(function(){
         $("ul").toggle(); //连续点击，ul的可见和隐藏状态进行互换

     });
    </script>
    
</body>

5.6 事件的动态绑定

对DOM元素绑定事件的另一种方法：

//绑定单个事件
$(".name").on('click',function(){
  alert("java");
});
//绑定多个事件
$(".name").on('click mouseover',function(){
  alert("java");
});

5.7 元素的隐藏和显示

元素的显示和隐藏，通过改变元素的宽和高(带动画效果)

show(speed)：显示

hide(speed)：隐藏

toggle(speed) 等价于show+hide：显示的隐藏，隐藏的显示

其中speed参数是指定显示和隐藏的速度，可以取slow、fast或者毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
   <button id="bt1">显示</button>
   <button id="bt2">隐藏</button>
   <button id="bt3">切换</button>
   <div></div>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
     $("#bt1").click(function(){
         $("div").show('slow');

     });
     $("#bt2").click(function(){
         $("div").hide(2000);

     });
     $("#bt3").click(function(){
         $("div").toggle(1000);

     });

    </script>
    
</body>

元素的显示和隐藏，通过改变元的高(拉伸效果)

slideDown(speed)：显示

slideUp(speed)：隐藏

slideToggle(speed)等价于slideDown+slideUp，其中speed参数是指定显示和隐藏的速度，可以取slow、fast或者毫秒。

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
   <button id="bt1">显示</button>
   <button id="bt2">隐藏</button>
   <button id="bt3">切换</button>
   <div></div>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
     $("#bt1").click(function(){
         $("div").slideDown(1000);

     });
     $("#bt2").click(function(){
         $("div").slideUp(1000);

     });
     $("#bt3").click(function(){
         $("div").slideToggle(1000);

     });

    </script>
    
</body>

元素的显示和隐藏，通过不改变元素的大小实现(淡入淡出效果)

fadeIn(speed)：显示

fadeOut(speed)：隐藏

fadeToggle(speed)等价于fadeIn+fadeOut动画

fadeTo(speed,透明度)允许给渐变指定不透明度(取值介于0和1之间)

style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
   <button id="bt1">显示</button>
   <button id="bt2">隐藏</button>
   <button id="bt3">切换</button>
   <button id="bt4">渐变</button>
   <div></div>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
     $("#bt1").click(function(){
         $("div").fadeIn(1000);

     });
     $("#bt2").click(function(){
         $("div").fadeOut(1000);

     });
     $("#bt3").click(function(){
         $("div").fadeToggle(1000);

     });
     $("#btn4").click(function(){
         $("div").fadeTo(1000,0.5);

     });

    </script>
    
</body>

5.8 链

链允许我们在同一个元素上在一条语句中执行多个jQuery方法，也就是可以把方法链接在一起,比如点击一次按钮，使div完成背景变粉、字体变红、收缩、拉伸这四个动作。

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color: white;
        font-size: 3em;
    }
</style>
<body>
   <button>试试</button>
  
   <div>hello</div>

    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);

        });
    

    </script>
    
</body>

6 DOM和CSS操作

6.1 属性函数

attr("属性")：获得元素的属性值:

  • attr("属性",“新值”)修改元素的属性值
  • attr(样式参数)：样式参数可以写成json格式

实例

<body>
   <button id="bt1">试试</button>
   <hr>
   <img src="blue.webp" title="水" width="300">

    <script src="jquery-3.4.1.min.js"></script>
    <script>
       $("#bt1").click(function(){
           $("img").attr("src","pig.jpeg");
           $("img").attr("title","Java");
           $("img").attr({width:"200",height:"200"});

       });
    

    </script>
    
</body>

val()：获得表单严肃中的value值，而value("x")则是修改表单元素中的value值

html()：获得元素的内容(标签+文本)，同理html("x")是修改对应内容

text()：获得元素的文本，同理text("x")是修改对应内容

<body>
   <button>试试</button>
   <input id="username">
   <div>
       <h1><i>study with me</i></h1>
   </div>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
       $("button").click(function(){
           alert($("input").val());
           alert($("input").val("哈哈哈"));

           alert($("div").html());
           alert($("div").text());
           $("div").text("加油吧");


        });
    

    </script>
    
</body>

6.2 样式函数

.css("属性")：获得该属性值，css("属性","值")设置属性的值，同时也可以用json格式css({json})设置多个属性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: black;
    }
</style>
<body>
   <button>试试</button>
   <hr>
   <div></div>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
       $("button").click(function(){
           var css=$("div").css("width");
           alert(css);
           $("div").css("background-color","pink");
           $("div").css({
               opacity:"0.4",
               background:"orange",
               borderRadius:"50%"

           });
         $("div").width(300);


        });
    

    </script>
    
</body>

width()：获得元素的宽度，width(number)修改元素的宽度

height()：获得元素的高度，height(number)修改元素的高度

6.3 类样式函数

addClass()：为元素添加类样式

removeClass()：将元素的类样式移除

toggleClass()：样式的切换

实例：

 <style>
    div {
      width: 100px;
      height: 100px;
      background-color: black;
    }
    .a {
      background-color: palegoldenrod;
      border-radius: 50%;
    }
    .b {
      border: 5px dashed darkcyan;
      opacity: 0.6;
    }
    .cn {
      background: #000;
      color: #fff;
    }
  </style>
  <body>
    <button id="bt1">试试</button>
    <button id="bt2">取消透明度</button>
    <button id="bt3">样式切换</button>
    <hr />
    <div></div>
    <h1>Java</h1>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
      $("#bt1").click(function () {
        $("div").addClass("a b");
      });
      $("#bt2").click(function () {
        $("div").removeClass("b");
      });
      $(bt3).click(function () {
        $("div").toggleClass("cn");
      });
    </script>
  </body>

6.4 节点操作

  • 创建节点，工厂函数$()用于获取或创建节点

  • 插入节点

    插入子节点

语法描述
append(content)$(A).append(B)将B追加到A中
appendTo(content)$(A).appendTo(B)把A追加到B中
prepend(content)$(A).prepend(B)把B前置插入到A中
prepend To(content)$(A).prependTo(B)把A前置插入到B中

插入同辈节点

语法描述
after(content)$(A).after(B)将B插入到B之后
insertAfter(content)$(A).insertAfter(B)把A插入到B之后
before(content)$(A).before(B)把B前置插入到A之前
insertBefore(content)$(A).insertBefore(B)把A插入到B之前

  • 替换节点

    replaceWith()和replaceAll()

  • 复制节点

    clone()

  • 删除节点

    remove()删除整个节点 empty()清空节点内容

<body>
    <input /><button id="test">测试</button>
    <ul>
      <li>Java</li>
      <li>go</li>
      <li>python</li>
    </ul>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
      $("#test").click(function () {
        var bookname = $("input").val();
        var newli = $("<li>" + bookname + "</li>");
        $("ul").append(newli);
        $("ul").prepend(newli);
        $("li:last").after(newli);
        $("li:eq(1)").replaceWith(newli);
        $("li:first").clone().insertAfter("li:last");
        $("li:first").empty();
        $("li:first").remove();
      });
    </script>
  </body>

6.5 遍历节点

祖先元素

用于向上遍历DOM树的方法：

  • parent()返回被选元素的直接父级元素(只找上一级，也就是爸爸)
  • parents()返回被选元素的所有祖先元素

同辈元素

  • next()获取紧邻匹配元素之后的元素
  • prev()取紧邻匹配元素之前的元素
  • siblings([selector])获取位于匹配元素前面和后面的所有同辈元素

后代元素

  • children([selector])方法返回被选元素的所有直接子元素(孩子)
  • find(选择器)方法返回被选元素的后代元素，一路向下直到最后一个后代
<body>
   <p><button>测试</button></p>
   <ul>
       <li>a</li>
       <li>
           <b>b</b>
       </li>
       <li>c</li>
   </ul>
   <p>p2</p>
   <p id="x">p3</p>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            var x1=$("b").parent().html();
            var x2=$("b").parents("ul").html();
            var x3=$("b").parents("body").html();
            alert(x1);
            alert(x2);
            alert(x3);
            var x4=$("ul").next().text();
            var x5=$("ul").prev().text();
            var x6=$("ul").siblings("#x").text();
            alert(x4);
            alert(x5);
            alert(x6);
            var x6=$("ul").children("li:first").text();
            alert(x6);
            var x7=$('ul').find("b").text();
            alert(x7);
        

        
        });     
    </script>
  </body>

6.3 元素的过滤

first()：过滤第一个元素

last()：过滤最后一个元素

eq(index)：过滤到下标为index的元素

not()：返回除什么之外的元素

is()：返回布尔，判断是不是这种元素

<body>
   <button>测试</button>
   <ul>
       <li>a</li>
       <li>b</li>
       <li>c</li>
   </ul>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            var x1=$("li").first().text();
            var x2=$("li").last().text();
            var x3=$("li").eq(1).text();
            var x4=$("li").not("li:eq(0)").text();
            var x5=$("li").parent().is("ul");
            alert(x1);
            alert(x2);
            alert(x3);
            alert(x4);
            alert(x5);
            alert(x6);
        });
    </script>
  </body>

7 综合案例

手风琴特效

  <style>
      dd{
          display: none;
      }
  </style>
  <body>
      <nav>
          <head>导航</head>
          <ul>
              <li>
                  <dl>
                      <dt>求职</dt>
                      <dd>1面试</dd>
                      <dd>2简历</dd>
                      <dd>3入职</dd>
                  </dl>
              </li>
              <li>
                <dl>
                    <dt>学习</dt>
                    <dd>1学</dd>
                    <dd>2练</dd>
                    <dd>3看</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>看书</dt>
                    <dd>1Java</dd>
                    <dd>2pyton</dd>
                    <dd>3javascript</dd>
                </dl>
            </li>
          </ul>
      </nav>
   
    <script src="jquery-3.4.1.min.js"></script>
    <script>
       $("nav dt").click(function(){
           $("dd").not($(this).siblings()).slideUp(500);
           $(this).siblings().slideToggle(500);

       })
    </script>
  </body>

购物车结算案例

<style>
    .jia,
    .jian {
      border: 1px solid #999;
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      text-decoration: none;
    }
  </style>
  <body>
    <table border="1" cellspacing="0" width="400">
      <tr>
        <td>商品编号</td>
        <td>名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>总价</td>
      </tr>
      <tr>
        <td>1</td>
        <td>香肠</td>
        <td>3</td>
        <td>
          <a href="#" class="jian">-</a>
          <span>1</span>
          <a href="#" class="jia">+</a>
        </td>
        <td>3</td>
      </tr>
      <tr>
        <td>2</td>
        <td>电脑</td>
        <td>10000</td>
        <td>
          <a href="#" class="jian">-</a>
          <span>1</span>
          <a href="#" class="jia">+</a>
        </td>
        <td>10000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>辣条</td>
        <td>6</td>
        <td>
          <a href="#" class="jian">-</a>
          <span>1</span>
          <a href="#" class="jia">+</a>
        </td>
        <td>6</td>
      </tr>
    </table>
    <p style="width: 400px; text-align: center">
      总价：<b style="color: red">111</b><button>提交订单</button>
    </p>
    <script src="jquery-3.4.1.min.js"></script>

    <script>
      $(".jia").click(function () {
        var i = $(this).prev().text();
        i++;
        $(this).prev().text(i);
        var price = $(this).parent().prev().text();
        var zong = i * price;
        $(this).parent().next().text(zong);
        total();
      });
      $(".jian").click(function () {
        var i = $(this).next().text();
        i--;
        if (i == 0) {
          if (confirm("是否删除该商品？")) {
            $(this).parents("tr").remove();
          }
        } else {
          $(this).next().text(i);
          var price = $(this).parent().prev().text();
          var zong = i * price;
          $(this).parent().next().text(zong);
        }
        total();
      });
      function total(){
          var sum=0;
          $("tr:not(tr:first)").find("td:last").each(function(){
              sum+=Number($(this).text());
          });
          $("b").text(sum);
      }
    </script>
  </body>
avatar
文章
阅读
粉丝