jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

无所事事的小窝

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量76

点赞数

分类专栏： JavaWeb 文章标签： jquery

本文链接：https://blog.csdn.net/zy3256/article/details/127661291

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

一、入门使用

<script src="jquery-3.6.1.min.js"></script>				//使用前一定要引入jQuery库
    <script>
        $(function(){									//表示页面加载结束相当于window.onload
            var $btnObj = $("#btn01");  
            $btnObj.click(function(){					//为按钮添加点击相应函数
                alert("jQuery的单击事件")
            })
        })
</script>

二、核心函数介绍

$ 函数介绍

1.传入参数为[函数]

在文档加载完成之后执行这个函数

<script src="jquery-3.6.1.min.js"></script>
<script>
        $(function(){									//表示页面加载结束相当于window.onload
            var $btnObj = $("#btn01");  
            $btnObj.click(function(){					//为按钮添加点击相应函数
                alert("jQuery的单击事件")
            })
        })
</script>

2.传入参数为[HTML字符串]

根据这个字符串创建元素节点对象，还只是在内存中，如果要显现的话需要appendTo函数

<script src="jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            $("<div>\n" +
                "    <span>这是div中第一个span</span>\n" +
                "    <span>这是div中第二个span</span>\n" +
                "    <span>这是div中第三个span</span>\n" +
                "</div>").appendTo("body");
        })
    </script>
</script>

3.传入参数为[选择器字符串]

根据字符串查找元素节点对象（#id） (.class)

<script src="jquery-3.6.1.min.js"></script>
<script>
        $(function(){									
            var $btnObj = $("#btn01");       //根据选择器查找元素节点,这是id选择器
        })
</script>

4.传入参数为[DOM对象]

将DOM对象包装为jQuery对象返回

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            document.getElementById(("btn01"));
            alert($(document.getElementById(("btn01"))))
        })
    </script>

</head>
<body>
    <button id="btn01">按钮</button>
</body>
</html>

三、jQuery对象和dom对象

二者的区分

在这里插入图片描述
jQuery· 对象alert 出来的效果是 [object Object]
Dom· 对象alert 出来的效果是 [object HTML标签名Element]
dom 对象的属性方法 jQuery对象不能使用，反过来 jQuery对象的属性方法 dom 对象不能使用

二者的互相转换

jQuery的本质是 DOM对象数组 + 提供的一系列函数

dom对象转化为jQuery对象
1. 先有dom对象
2. $(DOM对象) 接可以转化成jQuery对象
jQuery对象转化为dom对象
1. 先有jQuery对象
2. jQuery对象[下标] 取出相应的DOM对象

四、jQuery选择器

所查询到的结果按照body 标签内的顺序从上到下

（一）基本选择器

在这里插入图片描述
需要注意的是基本选择器应该怎么写，由上可知

（二）层级选择器

在这里插入图片描述

后代选择器选择的后代是子子孙孙
子元素选择器选择的单纯的是儿子
相邻元素注意，是相邻，不能隔太远
之后的兄弟元素选择器从此名字就可以知道，选择的是什么
特别需要注意的是如何写层级选择器，不同的是不一样的，由上第一个中间是空格，的二哥中间是 > ，第三个中间是加号，第四个中间是波浪号

（三）过滤选择器

1.基本过滤器

格式前面有一个冒号

在这里插入图片描述
注意 not(selector) ,去除所有与给定选择器匹配的的元素，selector ，我们给定选择器来查找

$ (“input : not(:checked)”) 查找所有未选中的input 元素

2.内容过滤器

在这里插入图片描述
注意
：parent 匹配的是含有子元素或文本的元素

3.属性过滤器

有些过滤器格式可参考正则表达式

在这里插入图片描述
稍微解释解释倒数第二个，匹配给定属性的值是包含某些值，比如 name *= mile; 这个过滤器就是过滤name属性值包含 mile 值，比如 mile milet mileage 三个都是符合要求的

4.表单过滤器

在这里插入图片描述

：input 匹配的是所有input textarea select 和 button 元素
：text 匹配单行文本框
：password 匹配密码框
：hidden 匹配不可见的框

5.表单对象属性过滤器

：enabled 匹配可用的框
: disabled 匹配不可用的
：checked 匹配选中的，一般是单选框和复选框
：selected 匹配选中的一般是下拉列表框

（四）jQuery元素筛选

我们会发现，这里其实都是方法

在这里插入图片描述
需要注意的是 parent（）所返回的是父元素，
而前面的内容筛选器：parent 匹配的是含有子元素或文本的元素

五、jQuery属性操作

注意：html（）设置获取的是内容，text（）设置获取的是文本，内容和文本是不一样的

在这里插入图片描述
另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            console.log($("#btn01").html());
            console.log($("div").html())
        })
    </script>

</head>
<body>
    <button id="btn01">我是一个按钮</button>
    <div>
        <span>
            我是一个span
        </span>
    </div>
</body>
</html>

在这里插入图片描述

这两个乍一看是一样的，但是，第一个attr 方法，如果我们在单选框中没有设置checked 属性，那么浏览器返回的就是 undifined 表示不确定，我们当然不乐意了，所以这个时候我们使用prop 方法，如果我们设置checked属性为checked ，用此方法，将会返回true，反之则会返回false。所以 attr 方法不推荐操作 checked readonly selected disabled 属性，prop 方法刚好相反

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="jquery-3.6.1.min.js"></script>
    <script>
        $(function(){
            $(":checkbox:first").attr("name","abc");     //此处表示设置name属性为abc，设置时，前一个参数是 属性 后一个参数是值
            $(":checkbox").attr("name");                 //此处表示显示那么属性的值
            $(":checkbox").prop("checked");              //此处表示获取checked对应的值
        })
    </script>

</head>
<body>
    <form>
        <input name = " checkbox" type="checkbox" checked="checked">王权富贵<br>
        <input  name = " checkbox" type="checkbox" >王权霸业<br>
    </form>
</body>
</html>

不传参数是获取内容，传参数是设置
val() 可以同时设置多个表单项的选中状态，格式是中括号里面是中括号里面包着value 的 value 值，同时可以设置不同表单项的选中状态，比如同时设置单选框、复选框、下拉列表框的选中状态

六、jQuery的增删改

在这里插入图片描述

$("哈哈").appendTo("p"); //将哈哈追加到p的后面

$("哈哈").prependTo("p"); //将哈哈前置到p的前面

$("哈哈").insertAfter("p"); //将哈哈插入到p的后面

$("哈哈").insertBefore("p"); //将哈哈插入到p的前面

在这里插入图片描述
替换，两个容易记错，replace with 英语翻译为替换为，a调用此替换方法，a就被替换掉了。a调用replace all 方法，意思是替换掉所有的，a调用此方法，用a替换掉所有的b。太麻烦了

七、CSS样式操作

在这里插入图片描述
都是添加class属性

.important {
    font-weight:bold;
    font-size:xx-large;
}
 
.blue {
    color:blue;
}

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});


//添加多个class属性
$("button").click(function(){
  $("body div:first").addClass("important blue");
});

css（）方法

//返回css属性
$("p").css("background-color");
//设置属性
$("p").css("background-color","yellow");
//设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});

八、jQuery的动画

在这里插入图片描述
解释说明 fadeTo()方法，表示将透明度变成相对应的参数，在这个方法中，第一个参数是执行时间，第二个参数是透明度，第三个参数是回调函数

九、jQuery的事件操作

jQuery事件以及js原生事件两者的区别
jQuery 中其他事件的处理方法

在这里插入图片描述
更多详细的方法见 jQuery事件|菜鸟教程

//绑定事件
$("p").click();   
// 触发单击事件  （并没有说一定要button才能单击）
$("p").click(function(){
    // 动作触发后执行的代码!!
});

$("areaDiv").bind("mouseover mouseout"）;     //绑定鼠标移入、移出等事件使用双引号，好烦，为什么要注意的点那么多

事件的冒泡
JavaScript 事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="jquery-3.6.1.min.js"></script>
  <script>
      //获取原生JavaScript 事件对象
    window.onload=function(){
        document.getElementById("areaDiv").onclick=function(event){
            console.log(event);
        }
    }
      //获取jQuery事件对象
    $(function(){
        $("areaDiv").click(function(event){
            console.log(event);
        })
    });
    //使用bind 同时对多个事件绑定同一个函数，可以通过event.type 来获取我们需要的事件
      $(function(){
          $("areaDiv").bind("mouseover mouseout",function(event){
             if(event.type==="mouseover"){
                 console.log("鼠标移入");
             } else{
                 console.log("鼠标移出");
             }
          })
      })
  </script>
</head>
<body>
<div id="areaDiv"></div>
</body>
</html>