-
JQuery
JQuery
https://www.jquery123.com/https://jquery.cuishifeng.cn/
什么是JQuery
jquery一个高效的，精简的且功能丰富的JavaScript工具库，满足了各种浏览器的兼容问题
web应用发展的过程中，jquery起到了不可或缺的推动作用
当下框架流行的时代，jquery不再那么适用
使用jquery感受，简单简洁，链式调用，读写一体
JQuery使用
下载—— 引入、
下载
https://jquery.com/download/
引入
版本 1.x ie6+ ,2.X IE 9+ ,3.X IE10+- 1
- 2
- 3
入口
- 1
- 2
- 3
- 4
- 5
- 6
为什么使用jQuery
写少的代码，做多的事情
免费 轻量级的js库，容量很小
兼容市面上的主流浏览器
注意jQuery不是将所有的js封装，只是有选择的封装
完善的Ajax应用，使Ajax变得简单
DOM操作简单化
丰富的插件支持，强大的易扩展性
开始jQuery
选择器
- 基本选择器
- 属性选择器
- 层级选择器
- …
- 过滤选择器
- 选择的方法
jQuery对象的写法
// console.log(document.getElementById('box')) null // window.onload = function () { // console.log(document.getElementById('box')) // } // window.onload = function () { // console.log(1) // } // console.log($('#box')) // 为了防止文档结构还没有完全加载就运行jQusery代码 // $(document).ready(function () { // // 写jquery代码 // }) // 简写 $(function () { // 写jquery代码 console.log($('#box')) }) $(function () { // 写jquery代码 console.log(123) }) // 以上两种写法 相当于js中的window.onload = function(){} // 区别 /*- 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
1：执行时机
window.onload必须再网页中所有的内容都加载完毕之后才可执行(包括图片img)
$(document).ready(function () {})页面当中的DOM结构绘制加载完毕即可执行，可能
与dom元素关联的并未完全加载完
2：编写个数
window.onload只能写一个
$(document).ready(function () {})可以编写多个 并且都会执行
3：简化写法
window.onload没有简化写法
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可以简化为 (document).ready(function () {})可以简化为 (document).ready(function())可以简化为(function(){})js的DOM对象和jQuery对象的区别
<div id="box">123</div> <script> // JavaScript通过js相关对象方法获取的对象 var box = document.getElementById('box') // console.log(box) // 通过jQuery包装后产生的对象 jQuery对象 // console.log($('#box')) // 注意:jQuery对象无法应用Dom对象的任何方法，Dom对象无法应用jquery的任何方法 // jQuery对象和js对象可以相互转换 // var $c = $('#box') // 第一种 转换为js对象 // var c = $c[0] // console.log(c) // 第二种 转换为js对象 // var c = $c.get(0) // console.log(c) // javascript对象转jQuery对象 var $cr = $(box) console.log($cr) </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
DOM操作
val() html() width() height() text() innerWidth() attr()- 1
- 2
- 3
- 4
- 5
- 6
- 7
<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> .mytext { width: 300px; height: 200px; padding: 50px; border: 10px solid red; } .one { color: red; } .two { color: blue; } </style> </head> <body> <div class="mytext"> jquery是js的工具库 <span>span标签</span> </div> <button id="btn">删除</button> <div class="box"></div> <a href="#">连接</a> </body> <script> // 属性操作与获取 // console.log($('.mytext').text()) // console.log($('.mytext').html()) // // $('.box').text("超链接") // $('.box').html("超链接") // console.log($('.mytext').width()) // console.log($('.mytext').height()) // $('.mytext').width(100) // $('.mytext').height(100) // console.log($('.mytext').innerWidth()) //width +padding // console.log($('.mytext').innerHeight()) //height +padding // console.log($('.mytext').outerHeight()) //width +padding+border // console.log($('.mytext').outerWidth()) //height +padding+border console.log($('a').attr('href')) $('a').attr('href', 'http://www.baidu.com') </script> </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
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
属性的获取与操作
class的操作
$('.mytext').addClass('one') $('.mytext').removeClass('one') $('.mytext').toggleClass('two') console.log($('.mytext').hasClass('two')) //true- 1
- 2
- 3
- 4
dom操作
// dom节点的操作 // 添加 // $('.mytext').append('我是h1标签
') // $('.mytext').prepend('我是h1标签
') // $('.mytext').before('我是h1标签
') // $('.mytext').after('我是h1标签
') $('#btn').click(function () { // $('.mytext').remove()//当前dom全部删除 $('.mytext').empty() //清空子元素 当前dom还在 })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
html事件
jQuery动画
<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> .box { width: 300px; height: 300px; background-color: green; } </style> </head> <body> <div class="box"></div> <button id="btn">显示</button> <button id="btn1">隐藏</button> <button id="btn2">显示/隐藏</button> <button id="btn3">滑入</button> <button id="btn4">滑出</button> <button id="btn5">滑入/滑出</button> <button id="btn6">淡入</button> <button id="btn7">淡出</button> <button id="btn8">淡入/淡出</button> </body> <script> /* speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" fn:在动画完成时执行的函数，每个元素执行一次。 */ $('#btn').click(function () { // $('.box').show() // $('.box').show('slow') // $('.box').show(3000) $('.box').show(3000, function () { alert('wo的动画执行完成') }) }) $('#btn1').click(function () { // $('.box').hide() $('.box').hide(3000) }) $('#btn2').click(function () { $('.box').toggle(3000) }) $('#btn3').click(function () { $('.box').slideDown(3000, function () { alert('wo的动画执行完成') }) }) $('#btn4').click(function () { $('.box').slideUp(3000) }) $('#btn5').click(function () { $('.box').slideToggle(3000) }) $('#btn6').click(function () { $('.box').fadeIn(3000, function () { alert('wo的动画执行完成') }) }) $('#btn7').click(function () { $('.box').fadeOut(3000) }) $('#btn8').click(function () { $('.box').fadeTo(3000, 0.6) }) </script> </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
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
dom遍历
// 遍历子孙节点 children find // $('ul').children('.list1').addClass('one') //查找符合某种选择器的孩子节点 参数选填 // $('ul').find('.list5').addClass('one') //查找符合某种选择器的孩子节点 参数必填 // 遍历祖先节点 parent parents parentUntil // $('span').parent().addClass('one') // $('span').parents().addClass('one') // 查找span的祖先元素 但是不包含body // $('span').parentsUntil('body').addClass('one') // 遍历同级节点 siiblings next nextUntil nextAll prev prevUntil prevAll // $('.list').siblings().addClass('one') // $('.list3').next().addClass('one') // $('.list').nextAll().addClass('one') // $('.list').nextUntil('.list5').addClass('one') // $('.list3').prev().addClass('one') // $('.list3').prevAll().addClass('one') // 给.list3前面直到.list前的元素加上类 one $('.list3').prevUntil('.list').addClass('one')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
五角星案例
<!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> *{ margin: 0; padding: 0; } .comment{ font-size: 40px; color: red; } .comment li{ float: left; cursor: pointer; } ul{ list-style: none; } </style> </head> <body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> <script> $(function(){ var wjx_none='☆' var wjx_sel='★' //鼠标放上去当前的li和之前的所有的li的内容全部变为实心五角星 移开变成空心 $('.comment li').on('mouseenter',function(){ //$(this).text(wjx_sel).prevAll('li').text(wjx_sel) //$(this).nextAll('li').text(wjx_none) //end() 结束之后再使用，相当于重新一行再次使用this $(this).text(wjx_sel).prevAll('li').text(wjx_sel).end().nextAll('li').text(wjx_none) $('.comment li').on('mouseleave', function () { // current用来记录离开时的星星 if ($('li.current').length === 0) { $('.comment li').text(wjx_none) } else { $('li.current') .text(wjx_sel) .prevAll('li') .text(wjx_sel) .end() .nextAll('li') .text(wjx_none) } }) $('.comment li').on('click', function () { $(this).attr('class', 'current').siblings('li').removeAttr('class') }) }) }) </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
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
-
相关阅读:
2022-09-02 mysql/stonedb-读取Pack数据流程记录
RabbitMQ特殊应用
异硫氰酸荧光素标记PCL载药纳米粒|FITC-PCL|PCL-FITC|FITC-SS-PEG-PCL（齐岳）
TS中类型别名和接口区别
《数据库》期末考试复习手写笔记-第11章 并发控制（锁）【10分】
【微信小程序】微信Web开发者工具的部分界面功能
基于51单片机的八路电压表采集Proteus仿真
Hadoop的第二个核心组件：MapReduce框架第四节
【AutoAugment】《AutoAugment：Learning Augmentation Policies from Data》
一个库帮你快速实现EF Core数据仓储模式
- 原文地址：https://blog.csdn.net/idiot_MAN/article/details/126720229
