jQuery

最新推荐文章于 2024-08-30 10:14:48 发布

依墨~

最新推荐文章于 2024-08-30 10:14:48 发布

阅读量122

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_62073591/article/details/126292672

版权

1.jQuery简介

1.1什么是jQuery

流行的JavaScript类库

为了简化JavaScript的开发，一些JavsScript.库就诞生了。JavaScript库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。

1.2jQuery特点

轻量级:封装后的库只有不到100k，下载的时候很快

强大选择器:方便快速查找DOM元素

隐式遍历(迭代):一次操作多个元素

读写合一:读数据/写数据用的是一个函数

链式调用:可以通过.不断调用jQuery对象的方法

事件处理

DOM操作(CUD)

样式操作

动画

浏览器兼容

丰富的插件支持

1.3jQuery入口函数

<script>
        //第一种
        $(document).ready(function(){
            console.log("aa");
        })
        //第二种
        $().ready(function(){
            console.log("bb");
        })
        //第三种
        $(function(){
            console.log("cc");
        })
</script>

2.基本选择器的使用

2.1什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意: jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

2.2基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".class);	获取同一类class的元素
标签选择器	$("div");	获取同一类标签的所有元素
并集选择器	$("div,p.li");	使用逗号分隔,只要符合条件之一就可。
交集选择器	$("div.redClass");	获取class为redClass的div元素

总结：跟css的选择器用法一样，外层加$()

<body>

<input type="text" id="one">+

<input type="text" id="two">=

<input type="text" id="result" disabled>

<input type="button" value="计算" class="btn">

<hr>

<input type="button" value="改变" id="btn2"><br>

<div class="div_0">这是一个标签</div>

<p class="div_0">这是一个标签</p>

<script>

$(function(){

$(".btn").click(function(){

var first=$("#one").val()

var second=$("#two").val()

var result=parseInt(first)+parseInt(second)

$("#result").val(result)

})

$("#btn2").click(function(){

$("div,p").css("color","white")

$("p,div_0").css("background-color","blue")

})

})

</script>

</body>

2.3层次选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取儿子层级的元素，注意,并不会获取孙子层级的元素
后代选择器	$("ul li);	使用空格，代表后代选择器，获取ul下的所有li元素,包括孙子等

跟CSS的选择器一模一样

$(".myu1 1i").css("height", "50px").css("background" , "#9dd3a8");$(".myu1>1i").css("height" , "30px").css("background", "#d9d9f3");

$(".myu1 1i").css("height", "50px").css("background" , "#9dd3a8");$(".myu1>1i").css("height" , "30px").css("background", "#d9d9f3");

3.属性选择器的使用

3.1基本属性选择器

名称	用法	描述
[attribute]	$('input[checked]').attr('checked ,false);	匹配包含给定属性的元素。常用于单选或复选的checked
[attribute=value]	$('input[name="username"T').val(");	匹配给定的属性是某个特定值的元素。常用于选择指定的input标签。
[attribute!=value]	$('div[namel="box"J).html("");	匹配给定的属性是不包含某个特定值的元素。
[attribute =value]	$('div[class=“b"T).css("background","red");	匹配给定的属性是以某些值开始的元素。
[attribute*=value]	$('div[class=“b"T).css("background","red");	匹配给定的属性是以包含某些值的元素。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

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

<style>

div{

width: 100px;

height: 100px;

border: 1px solid red;

margin-right: 10px;

display: flex;

justify-content: center;

align-items: center;

float: left;

}

</style>

</head>

<body>

<button id="btn1">所有含class的标签</button>

<button id="btn2">所有含class是box1的标签</button>

<button id="btn3">所有含class不是box1的标签</button>

<button id="btn4">所有含class是以b开始的标签</button>

<button id="btn5">所有含class包含0的标签</button>

<hr>

<div>div标签</div>

<div class="box1">box1</div>

<div class="box1">box1</div>

<div class="bex2">bex2</div>

<div class="pox1">pox1</div>

<div class="pox2">pox2</div>

<script>

$(function(){

$("#btn1").click(function(){

$("[class]").css("background-color","red")

})

$("#btn2").click(function(){

$("[class='box1']").css("background-color","yellow")

})

$("#btn3").click(function(){

$("div[class!='box1']").css("background-color","blue")

})

$("#btn4").click(function(){

$("[class^='b']").css("background-color","green")

})

$("#btn2").click(function(){

$("[class*='o']").css("background-color","orange")

})

})

</script>

</body>

</html>

依墨~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意: jQuery选择器返回的是jQuery对象。jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。...
复制链接

扫一扫