当前位置：首页 > article >正文

Jquery详解

article 2025/2/27 23:26:45

一.Jquery介绍

1.jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画效果和 AJAX 交互等操作，使开发者能够更轻松地创建动态和交互性强的网页。对原生js的封装,提供了很多时间,调用Api即可,并且对浏览器做了兼容性
快速入门:

//1.$(function(){})等价于原生的js的,当页面加载完成就会执行的function(){}
  $(function (){
      //$btn01是一个jquery对象,其实就是对dom对象的封装
      //jquery中获取对象的方法是$(#id),编程中规定jquery的对象以#开头命名
      var $btn01 = $("#btn01");
    $btn01.click(function (){
        alert("hello,jquery...")
    })
  })

2.什么是jquery对象
①jquery对象是对dom对象包装后的对象
②jquery对象是jquery独有的,如果一个对象是jquery对象,那么他可以使用jquery的方法

3.dom对象和query对象互转

①dom对象转
 window.onload=function (){
      var username = document.getElementById("username");
      //alert(username.value)
      var $username = $(username);
      alert($username.val()+"juqer的")
    }
    <body>
   用户名: <input type="text" name="username" id="username" value="小明">
</body>

②

window.onload=function (){
    var $username = $("#username");
    alert($username.val())

    }
    <body>
   用户名: <input type="text" name="username" id="username" value="小明">
</body>

③jquer对象转dom对象

 <script type="text/javascript">
    $(function (){
      var $username = $("#username");
      //将jquery对象转为dom对象,jquery是一个数组对象
      //方式一
      var username1 = $username[0];
      alert(username1.value)
      //方式二
      var username2 = $username.get(0);
      alert(username2.value)
    })
  </script>

二.Jquery选择器

	在dom编程中,若网页没有id=value的元素就会报错,而jqueery编程不会报错
	**1.基本选择器**  包括类,元素,标签选择器

 <style type="text/css">
    .mini{
      width: 60px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }
    #two{
      width: 100px;
      height: 30px;
      background: chartreuse;
      border: #000 1px solid;
      font-size: 12px;

    }
    #s_two{
      width: 100px;
      height: 30px;
      background: darkslategrey;
      border: #000 1px solid;
      font-size: 12px;
    }

  </style>
  <script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //1.改变id为one的元素的背景色(id选择器)
      $("#b1").click(
              function () {
                var $one = $("#one");
                $one.css("background", "#0000FF")
              })
      //2.改变class为mini的所有元素的背景色(类选择器)
      $("#b2").click(function () {
        $(".mini").css("background", "#FF0033")
      })
      //3.改变元素名为<div>的所有元素背景(元素选择器)
      $("#b3").click(function () {
        $("div").css("background", "#00FFFF")
      })

      //4.改变所有元素的背景色
      $("#b4").click(function (){
        $("*").css("background","#00FF33")
      })
    //5.改变所有的<span>元素和id为two class的所有元素的背景色为#3399FF(组合选择器)
    $("#b5").click(function (){
      $("#two,span").css("background","#3399FF")
    })
    })

  </script>
</head>
<body>
<input type="button" value="改变id为one的元素的背景色为#0000FF" id="b1">
<input type="button" value="改变class为mini的元素的背景色为#FF0033" id="b2">
<input type="button" value="改变元素名为<div>的所有元素的背景色为#00FFFF" id="b3">
<input type="button" value="改变所有元素的背景色为#00FF33" id="b4">
<input type="button" value="改变所有的<span>元素和id为two class的所有元素的背景色为#3399FF" id="b5">

<div id="one" class="mini">div id为one</div>
<div id="two" >div id为two</div>
<div id="three" class="mini">div id为three</div>
<span id="s_one" class="mini">span one</span>
<span id="s_two">span two</span>

</body>

2.层次选择器,
想通过dom元素之间的层次关系来获取特定元素,例如后代元素,子元素,兄弟元素,相邻元素就要用到层次选择器

<script type="text/javascript">
    $(function (){
    //1.改变<body>内所有<div>的背景色为#0000FF
      $("#b1").click(function (){
        $("div").css("background","#0000FF")
      })
      //2.改变<body>内子<div>的背景色为#FF0033
      $("#b2").click(function (){
        $("body > div").css("background","#FF0033")
      })
      //3.改变id为one的下一个<div>的背景色为#0000FF
      $("#b3").click(function (){
       // $("#one").next().css("background","#0000FF")
        $("#one+div").css("background","#0000FF")
      })
      //4.改变id为two的元素后面的所有兄弟<div>的元素的背景为"#0000FF"
      $("#b4").click(function (){
        //$("#two~div").css("background","#0000FF")
        $("#two").nextAll("div").css("background","#0000FF")
      })
      //5.改变id为two的元素所有<div>兄弟元素的背景色为#0000FF
      $("#b5").click(function (){
        $("#two").siblings("div").css("background","#0000FF")
      })
    })
  </script>
</head>
<body>
<input type="button" value="改变<body>内所有<div>的背景色为#0000FF" id="b1">
<input type="button" value="改变<body>内子<div>的背景色为#FF0033" id="b2">
<input type="button" value="改变id为one的下一个<div>的背景色为#0000FF" id="b3">
<input type="button" value="改变id为two的元素后面的所有兄弟<div>的元素的背景为#0000FF" id="b4">
<input type="button" value="改变id为two的元素所有<div>兄弟元素的背景色为#0000FF" id="b5">

<div id="one" class="mini">div id为one</div>
<div id="two" >div id为two
<div id="two01">id two 01</div>
  <div id="two02"> id two02</div>
</div>
<div id="three" class="mini">div id为three
<div id="three01"> id three01</div></div>
<span id="s_one" class="mini">span one</span>
<span id="s_two">span two</span>

</body>

3.基础过滤选择器
在这里插入图片描述

4.内容过滤选择器

5.可见度过滤选择器
在这里插入图片描述

6.属性过滤器
在这里插入图片描述

7.子元素过滤器

8.表单属性过滤器

三.jquery的dom操作

**1.创建节点**

在这里插入图片描述

2.删除节点
用jquery的remove方法,当删除节点时,包括删除该节点所有的子节点
清空节点:用empty方法会清空节点的所有子节点,不包含属性节点(清空节点内容)
3.复制节点
clone():克隆匹配的dom元素,返回值为克隆后的副本,但此时复制的新节点不具有任何行为
clone(true):复制元素的同时也复制元素中的事件
4.替换节点
replaceWith():将所有匹配的元素都替换为指定的HTML或者Dom元素:A.replacewith(B)
replaceAll():颠倒了的replaceWith()方法.A.replaceAll(B)
注意事项:若在替换之前,已经在元素上绑定了事件,则替换后原先绑定的事件会与原先的元素一起消失
5.属性操作
attr() 用于获取属性和设置属性,传递一个参数获取指定属性,传递两个参数为设置属性的值
如removeAttr():删除指定元素的指定属性
6.样式操作
//1.获取和设置样式
$(“#first”).attr(“class”,“one”)
//2.追加样式
$(“#first”).addClass(“one”)
//3.移除样式
$(“#first”).removeClass()
//4.切换样式
$(“#first”).toggleClass(“one”)
//5.判断是否含有某个样式
$(“first”).hasClass(“one”)
7.常用遍历节点方法
在这里插入图片描述