-简介

--本质

jQuery本质就是js代码，只不过对其进行了封装使使用起来更方便，且内部添加了更多功能

类似于Python的模块，只不过在前端称为“类库”

--介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库
jQuery使用户方便的处理HTML、Document、Events、实现动画效果，方便地进行Ajax交互，极大化地简化JavaScript编程。它的宗旨就是“Write less, Do more.”

--优势

一款轻量级的js框架，jQuery核心js文件才几十kb，不影响页面加载速度
丰富的DOM选择器，用起来方便
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁
可读性比js强。事件、动画、样式支持
Ajax操作支持。jQuery简化了Ajax操作，后端只需返回一个JSON格式数据即可与前端通信
跨浏览器兼容。jQuery基本兼容了所有现在主流的浏览器
插件扩展开发。jQuery有丰富的第三方插件，如树形菜单、日期控件。支持三方改写封装

--基本使用

---导入方式

1、进入官网下载文件到本地，使用时导入即可jQuery

2、引入jQuery的CDN(内容分发网络)服务

前端免费CDN网站：bootcdn

<script src="htttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

---基本语法

jQuery(选择器).操作()

秉持jQuery的宗旨，以后写jQuery都和用$代替： $(选择器).操作()

-选择器

--基本选择器

id： $('#id')
class: $('.class')
标签： $('标签')

注：选择器返回的都是jQuery对象(即数组，不过在jQuery中叫jQuery对象)，通过索引取标签对象

--组合选择器

后代$('div p') 儿子$('div>p') 邻居$('div+p') 弟弟$('div~p')

--属性选择器

$('[username]') $('[type='text']') $('p[name='weer']')

--分组与嵌套

分组$('#d1, .c1') 嵌套$('div.#d1')：找为d1的div

-筛选器

--基本筛选器

$('ul li:first') ul里面的大儿子li
$('ul li:last') ul里面的小儿子li
$('ul li:eq(2)') ul对象后代li对象数组的索引为2的标签
$('ul li:even')  li的jQuery对象里的索引为偶数的标签数组
$('ul li:odd')   li的jQuery对象里的索引为奇数的标签数组
$('ul li:gt(2)') 索引大于2的
$('ul li:not(#d1)') 除了id为d1的
$('div:has(p)')   内部含有p标签的div都选

注：以上都可以把方法拿到外面加点调用，比如$('div span:first')<==>$('div span').first()

--表单筛选器

只针对表单标签里的标签

$(':text')   <==>   $('input[type='text']')
$(':password')   <==>   $('input[type='password']')
$(':file') $(':radio') $(':checkbox') $(':submit') ......

也可针对表单属性进行筛选：

$(':disabled')  $(':checked')  $(':seclected')...

注： :checked会将checked和selected的都拿到

--筛选器方法

$('#d1').next()	下一个	$('#d1').parent()	父标签
$('#d1').nextAll()	下一个所有	$('#d1').parent().parent()	父的父，可多次 html的父为document对象再上就没有了
$('#d1').nextUntil('.c1')	下一个所有直到不包含	$('#d1').parents()	父的所有
$('#d1').prev()	上一个	$('#d1').parentsUntil('body')	父的所有直到不包含
$('#d1').prevAll()	上一个所有	$('#d1').children()	儿子们
$('#d1').prevUntil('.c1')	上一个所有直到不包含	$('#d1').siblings()	兄弟们

-操作

--类操作

.addClass()
.removeClass()
.hasClass()
.toggleClass()

--css操作

.css('属性名','属性值')

--位置操作

.offset()          相对于浏览器窗口的距离
.position()        相对于父标签的距离
.scrollTop()       滚轮滑动导致距浏览器上端距离$(window).scrollTop()      显示向上翻了多少像素$(window).scrollTop(500)   自动跳转到向上滚了500像素去
.scrollLeft()      滚轮左右滑动导致左右偏移距离

--尺寸操作

---p标签内部文本---
$('p').height()
$('p').width()---文本+padding---
$('p').innerHeight()
$('p').innerWidth()---文本+padding+border---
$('p').outerHeight()
$('p').outerWidth()

--文本操作

原生js           jQuery
.innerText       .text()
.innerHtml       .html()

--获取值操作

.val()       # 不加参数即为获取值，加参数即为设置值

获取文件：jQuery对象转js对象

$(':file').files[0]

--属性操作

js                        jQuery
setAttribute()             attr(name,value)
getAttribute()             attr(name)
removeAttribute()          removeAttr(name)

注：对一些用户选择标签checkbox、radio、option等，可用prop()判断用户是否选择

--标签操作

js                        jQuery
createElement('p')        $('<p>')
appendChild()             append()eg:
let $pEle = $('<p>');
$pEle.text('weer')
$('#d1').append($pEle)    // 内部尾部追加
$('#d1').prepend($pEle)   // 内部头部追加
$('#d1').after($pEle)     // 放在同级后面
$('#d1').before($pEle)    // 放在同级前面.remove() 移除所有
.empty()  只清空内容

-事件

--绑定方式

1、$(' ').click(function(){})
2、$(' ').on('click',function(){})

常用事件：
click
hover
blur
focus
change
keyup

--示例

---克隆事件

<style>body{margin: 0;}#d1{background-color: orange;height: 200px;width: 200px;top: 0;left: 0;}
</style><body><button id="d1">点击就送屠龙宝刀!</button><script>$("#d1").on('click', function (){// $(this).clone().insertAfter('body') // clone默认克隆html和css，不会克隆绑定事件$(this).clone(true).insertAfter('body') // 括号内加true即可克隆绑定事件})</script>
</body>

---模态框显示

<style>body{margin:0;}#cover{background-color: rgba(0,0,0,0.5);top: 0;left: 0;bottom: 0;right: 0;position:fixed;z-index: 99;}#modal{background-color: white;position: fixed;left: 40%;top: 20%;width: 400px;height: 400px;z-index: 100;}.hide{display: none;}
</style><body><div><p>这是底层</p><button id="login">登录</button></div><div id="cover" class="hide"></div><div id="modal" class="hide"><h2>登录</h2><p>username:<input type="text"></p><p>password:<input type="password"></p><input type="submit" id="submit"></div><script>$('#login').click(function (){$('#cover,#modal').removeClass('hide')})$('#submit').click(function (){$('#cover,#modal').addClass('hide')})</script>
</body>

---对应菜单栏显示

点击某个菜单就显示该菜单下的内容，其余隐藏

<style>body{margin: 0;}#left{width: 20%;height: 100%;position: fixed;background-color: #4e4e4e;text-align: center;}.title{font-size: 24px;color: white;}.item{border: 1px solid black;font-size: 16px;}.hide{display: none;}
</style><body><div id="left"><div class="title">menu 1<div class="item hide">111</div><div class="item hide">222</div><div class="item hide">333</div></div><div class="title">menu 2<div class="item hide">www</div><div class="item hide">mmm</div><div class="item hide">qqq</div></div><div class="title">menu 3<div class="item hide">aaa</div><div class="item hide">bbb</div><div class="item hide">ccc</div></div></div><script>$('.title').click(function (){$(this).children().toggleClass('hide')})</script>
</body>

---返回顶部

<style>body{margin: 0;}#backTop{width: 50px;height: 50px;bottom: 10px;right: 20px;position: fixed;}.hide{display: none;}
</style><body><div style="background-color: red;width: 100%;height: 800px;"></div><div style="background-color: green;width: 100%;height: 800px;"></div><div style="background-color: purple;width: 100%;height: 800px;"></div><button id="backTop" class="hide">回到顶部</button><script>$('#backTop').click(function (){$(window).scrollTop(0)})$(window).scroll(function (){if($(window).scrollTop() > 600){$('#backTop').removeClass('hide')}else {$('#backTop').addClass('hide')}})</script>
</body>

---自定义登录校验

<body><p>username:<input type="text" id="name"><span style="color: red;"></span></p><p>password:<input type="password" id="pwd"><span style="color: red;"></span></p><input type="submit" id="submit"><script>$('#submit').click(function (){if(!$('#name').val()){$('#name').next().text('用户名不能为空')}if(!$('#pwd').val()){$('#pwd').next().text('密码不能为空')}})$(':input').focus(function (){$(this).next().text('')})</script>
</body>

---键盘按下操作

<script>$(window).keydown(function (event){ //event用于获取按键alert(event.keyCode);           // 每个按键其实是有个编码来对应if(event.keyCode == 16){alert('你点击了shift键')} // shift编码是16})
</script>

--阻止后续事件执行

<script>$(':input').on('click', function (enent){$('p').text('点击提交后给我添加的文字')/* 此时点击提交理应在p中显示上述文字但由于submit点击后自动触发刷新事件所以文字不会显示出来*/// 阻止标签后续执行的方式一！return false// 阻止标签后续事件执行的方式二event.preventDefault()})
</script>

--防止冒泡

冒泡就是对嵌套标签，触发子代标签事件而父代也触发，连环

<body><div id="d1">div<p id="d2">div>p<span id="d3">div>p>span</span></p></div><script>$('#d1').click(function (){alert('div')})$('#d2').click(function (){alert('div>p')}) // 点击p标签中的文字会alert两次// $('#d3').click(function (){alert('div>p>span')}) // 点击span中文字会alert三次$('#d3').click(function (event){alert('div>p>span')// 消除冒泡的方式一return false// 消除冒泡的方式二event.stopPropagation()// 此时点击span中文字只会alert自己的一次了})</script>
</body>

--事件委托

在指定范围内把事件委托给某个标签来做，无论原先的还是动态添加的

主要用来针对后面动态添加的方法也能有原先绑定的事件

<body><button class="c1">你过来啊！</button><!--    <script>          -->
<!--        $('button').click(function (){alert('我就过来了！')})       -->
<!--        //原生button标签点击可触发alert事件，但若在控制台或后台人为动态添加button到body内，点击新动态添加的不会触发alert事件    -->
<!--    </script>         --><script>$('body').on('click','c1',function (){alert('我就过来了！')})// 含义是所有在body范围内的含c1的标签(不管原生还是动态添加的)点击后都能触发alert事件</script>
</body>

--简单动画效果

<div style="background-color:red;height:600px;width:400px"></div>$('div').hide(4000)           未消失才4s隐藏
$('div').show(4000)           未出现4s后出现
$('div').toggle(4000)         有则消失，无则出现
$('div').fadeIn(4000)         消失才渐变出现
$('div').fadeOut(4000)        出现才渐变消失
$('div').fadeTo(4000, 0.5)    渐变到透明度为0.5结束
$('div').fadeToggle(4000)     有则渐变消失，无则渐变出现
$('div').slideUp(4000)        上翻消失
$('div').slideDown(4000)      下翻出现

-- .each()方法

相当于for循环，更简单的循环迭代器

可对jQuery对象遍历迭代，传一个参数是索引，传两个参数是索引+jQuery对象

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div><script>$('div').each(function(index){console.log(index)});$('div').each(function(index, obj){console.log(index, obj)});
</script>

$.each([111,222,333], function(index, obj){console.log(index, obj)});

-- .data()方法

让标签帮我们存数据，且用户右键检查看不到！

$('div').data(key,value);   // 所有div标签保存一个名为key值为value
$('div').data(key);         // 返回第一个div标签你中保存的key值对应的value
$('div').removeData(key);   // 移除元素上存放key对应的数据，不加key值表示移除所有保存的数据

-思维导图

Python-jQuery相关推荐

python+jQuery 实现图片颜色比重分析
python+jQuery 实现颜色比重分析 1.使用到的python库 time webbrowser cv2 collections 2.创作思路:利用cv2库中的方法逐行扫描图片的每一个像素点, ...
Python jquery标签云
很多知名博主都喜欢弄个标签云.今天特地看了下源码.把标签云的方法单独扣了出来.这里做一下记录 html页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
doraemon的python jquery
### 11.9 iquery iquery介绍:jQuery是一个快速.小巧功能丰富的JavaScript库,它通过易于使用的API在大量浏览器中运行,是的HTML文档便利和操作,事件处理,动画和A ...
python flask框架详解
Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档, 英文不好的同学也可以参考中文文档 1.安装flask pi ...
linux安装12c oem,OEM12C(12.1.0.5)安装插件监控mysql(linux)
目录结构: 环境说明: oms:12.1.0.5 os:centos 6.X MYSQL: 5.7.21 OS:centos 7.X 一.安装插件mysql database 下载地址: http ...
tornado学习笔记day06-应用安全
应用安全 cookie 普通cookie 一般我们的用户表中都有啥呢你在购物的时候,加入购物车,让你登录,那你登录之后,他怎么知道你登录了呢 token 这个值是随机的,存在cookie里面设置 ...
免费学习编程-值得收藏
免费学习编程 Code.org是美国非营利组织在一些科技大佬的鼎立支持下正计划将高品质计算机科学课程带进学校 1. MIT 开放式课程 MIT 提供免费的课程内容浏览服务,只要你有时间,随时可以进入. ...
mac电脑显示隐藏文件方法
永久去掉隐藏命令chflags nohidden 空格把文件拖进来回车一次只能一个文件 OK 添加隐藏命令chflags hidden 空格文件拖进来回车一次一个OK 输入显示Mac隐藏文件的 ...
android studio gradle 添加jar,android studio学习----通过gradle来导入jar包
转载地址:http://www.th7.cn/Program/Android/201507/495477.shtml File->Project Structure 可以打开下面的图: 1.通过 ...
如何使用JS的排序函数sort()
Array对象中的sort()方法是一个很高效的排序方法,用于对数组进行排序.其基本用法有两种: 1.不带参数数组名.sort(); 这种用法只适用于对英文字符串组成的数组按升序排序,结果在原数组中 ...

Python-jQuery

目录

-简介