-
jQuery
jQuery
jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、数据处理等进行封装,提供更便捷的方法。
引入
先引入jquery文件，才能使用jquery语法
https://www.bootcdn.cn/
https://jquery.cuishifeng.cn/
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>Documenttitle> head> <body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script> <script src="jquery.min.js">script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
工厂函数 - $()
"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery对象实际是一个类数组对象，包含了一系列 jQuery操作的方法。
原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
-
原生JavaScript转换jQuery对象
$(原生对象)，返回 jQuery 对象
-
jQuery对象转换原生JavaScript对象
方法一 : 根据下标取元素,取出即为原生对象
var div = $(“div”)[0];方法二 : 使用jQuery的get(index)取原生对象
var div2 = $(“div”).get(0);
jQuery获取元素
标签选择器：$(“div”)
ID 选择器：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲d1") 类选择器：(“.c1”)
群组选择器：$(“body,p,h1”)层级选择器
后代选择器： $(“div .c1”)
子代选择器： $(“div>span”)
相邻兄弟选择器： $(“h1+p”) 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $(“h1~h2”) 匹配选择器1后所有满足选择器2的兄弟元素过滤选择器，需要结合其他选择器使用。
对象:first
匹配第一个元素 例: ( " p : f i r s t " ) 对象 : l a s t 匹配最后一个元素例 : ("p:first") 对象:last 匹配最后一个元素 例: ("p:first")对象:last匹配最后一个元素例:(“p:last”)
对象:odd
匹配奇数下标对应的元素
对象:even
匹配偶数下标对应的元素
对象:eq(index)
匹配指定下标的元素
对象:lt(index)
匹配下标小于index的元素
对象:gt(index)
匹配下标大于index的元素
对象:not(选择器)
否定筛选,除()中选择器外,其他元素基本选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <h1 id="title">静夜思h1> <h2>李白h2> <ul> <li>窗前明月光li> <li class="item">疑是地上霜li> <li class="item">举头望明月li> <li>低头思故乡li> ul> <p>静夜思p> <span>李白span> <script src="jquery.min.js">script> <script> $('#title').css("color","yellow").css('text-align','center') $('.item').css('basckground-color','pink') $('p,span').css('font-size','52px') console.log($('#title')) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
过滤选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <h1 id="title">静夜思h1> <h2>李白h2> <ul> <li>窗前明月光li> <li>窗前明月光li> <li>窗前明月光li> <li class="item">疑是地上霜li> <li class="item">疑是地上霜li> <li class="item">疑是地上霜li> <li class="item">举头望明月li> <li class="item">举头望明月li> <li class="item">举头望明月li> <li>低头思故乡li> <li>低头思故乡li> <li>低头思故乡li> ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script> <script> // 选中第一个item元素 $('.itme:first').css('color','#096') // 选中最后一个item元素 $('.itme:last').css('color','yellow') // 选中li里面的奇数下标的元素 $('li:odd').css('color','green') // 选中li里面的偶数下标的元素 $('li:even').css('color','red') // 选中li里面下标为5的元素 $('li:eq(5)').css('color','#6cf') // 选中li里面下标小于5的元素 $('li:lt(5)').css('color','#6cf') // 选中li里面下标大于于5的元素 $('li:gt(5)').css('color','#6cf') // 选中li里面不是item的元素 $('li:not(.item)').css('color','#6cf') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
操作元素内容
可以和之前的表单一起使用
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <div>div> <input type="text"> <button>点击提交button> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script> <script> // 修改div的内容 $('div').html('记得多看书') $('button').click(function(){ alert($('input').val()) }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
操作标签属性
-
attr(“attrName”,“value”)
设置或读取标签属性
-
prop(“attrName”,“value”)
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写 -
removeAttr(“attrName”)
移除指定属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <p> 我已经阅读并同意 <input type="checkbox" name="" id="check" checked="true"> <a href="#">已同意a> 协议 p> <input type="submit" name="" id="rad" value="注册"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script> <script> $('#reg').click(function(){ // attrname 属性名 // alert($('#check').attr('checked')) // alert($('#check').prop('checked')) $('#check').prop('checked')? alert('注册成功'):alert('请勾选协议') }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
操作标签样式
- 为元素添加id/class属性,对应选择器样式
- 针对类选择器,提供操作class属性值的方法
addClass(“className”) //添加指定的类名
removeClass(“className”)//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass(“className”)//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .box{ width: 300px; height: 300px; background-color: aquamarine; } .tset{ border: 5px solid rgb(red, green, blue); } style> head> <body> <div class="test">div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script> <script> // 增加一个box类 $('div').addClass('box') // 删除 $('.box').removeClass('test') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
3.操作行内样式
css(“属性名”,“属性值”) //设置行内样式
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <div>div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js">script> <script> $('div').css('height','300px').css('width','300px').css('background-color','#096') $('div').css({ 'height':'300px', 'width':'300px', 'background-color':'#096' }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
元素的创建，添加，删除
- 创建：使用$(“标签语法”)，返回创建好的元素
var div = $(""); //创建元素 div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性 var h1 = $("一级标题
"); //创建的同时设置内容，属性和样式- 1
- 2
- 3
- 作为子元素添加
$obj.append(newObj); //在$obj的末尾添加子元素newObj $obj.prepend(newObj); //作为第一个子元素添加至$obj中- 1
- 2
- 作为兄弟元素添加
$obj.after(newObj); //在$obj的后面添加兄弟元素 $obj.before(newObj); //在$obj的前面添加兄弟元素- 1
- 2
- 移除元素
$obj.remove(); //移除$obj- 1
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <button id="btn">干掉敌人button> <script src="./js/jquery.min.js">script> <script> // 给body标签末尾添加一个子元素 $('body').append('干掉他') // 给body标签开头添加一个子元素 $('body').prepend('杀掉他') $('#water').before('杀掉他') $('#water').after('杀掉他') $('#water').click(function(){ $('.water').remove() }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
动画效果
-
显示和隐藏
show(speed,callback)/hide(speed,callback)- 1
- speed可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
- callback 可选。show 函数执行完之后，要执行的函数
-
下拉和上推效果，显示隐藏的被选元素（ 只针对块元素 ）
slideDown(speed,callback)/slideUp(speed,callback)- 1
-
通过使用淡隐淡现方式显示效果，显示隐藏的被选元素
fadeOut(speed,callback)/fadeIn(speed,callback)- 1
数据与对象遍历
-
$(selector).each() 方法规定为每个匹配元素规定运行的函数
$(selector).each(function(index,element){})- 1
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- element - 当前的元素
-
$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理
$.each(Object, function(index, data){});- 1
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- data- 当前的数据
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <ul> <li>item1li> <li>item2li> <li>item3li> <li>item4li> ul> <script src="./js/jquery.min.js">script> <script> $('li').each(function(index,obj){ console.log(index,obj) }) let name = ['小明','小刚','小红','小兰'] console.log(name) $(name).each(function(index,obj){ console.log(index,obj) }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
-
相关阅读:
入门 对有序数组进行二分搜索 + 图解 (上篇)
Docker安装、启动、管理ElasticSearch、ElasticSearch-heade、kibana
05、SpringBoot 集成 RocketMQ
记一次 MySQL timestamp 精度问题的排查 → 过程有点曲折
网工记背命令(6)----链路聚合配置
中国石油大学(北京)-《 修井工程》第二阶段在线作业
原生小程序小话题——引用、模板
7-126 2018我们要赢
基于springboot敬老院管理系统毕业设计-附源码161551
广泰转债，雅创转债上市价格预测
- 原文地址：https://blog.csdn.net/weixin_44774550/article/details/131035025
