1.什么是jQuery

2.jQuery优势及特点

3.jQuery常用网站

4.jQuery引入

5.jQuery入口函数的写法

6.jQuery函数

7.jQuery对象

8.jQuery对象与Dom对象

9.jQuery选择器

9.1基本选择器

9.2层次选择器

9.3过滤选择器

9.4后代过滤器

9.5表单过滤器

jQuery(一)

1.什么是jQuery

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。

理念：write less,do more

2.jQuery优势及特点

轻量级
强大的选择器
出色的DOM操作的封装
可靠地事件处理机制
完善的Ajax
不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层与结构层的分离
丰富的插件支持
完善的文档
开源

3.jQuery常用网站

[官方地址] https://jquery.com/
[jQuery库] https://www.bootcdn.cn/jquery/ 不同版本
[jQuery常用工具] https://www.runoob.com/jquery/jquery-tutorial.htm
[jQuery常用工具] https://www.w3school.com.cn/jquery/index.asp

4.jQuery引入

1.通过本地引入

<script type="text/javascript" src="./jquery-3.5.1/jquery-3.5.1.js"></script>

2.通过cdn网站引入

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>

3.jQuery位置问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 因为浏览器解析html是从上到下解析所以在1，2位置需要使用匿名函数，--><script>// 1.放在<head>中$(function(){
})</script>
</head>
<body><!-- 2.放在<body>前面 --><script>$(function(){
})</script>



<!-- 3.放在<body>最后面 --><script>
</script>
</body>
</html>

5.jQuery入口函数的写法

<script>$(document).ready(function(){alert('hello')})
</script>

<script>jQuery(document).ready(function(){alert('hello')})
</script>

3.推荐常用

<script>$(function(){alert('hello')})
</script>

<script>JQuery(function(){alert('hello')})
</script>

6.jQuery函数

<script>//1.参数为匿名函数，当Dom加载完成后，执行此回调函数$(function(){//2.参数为选择器（字符串）:查找所有匹配的标签,并将它们封装成jQuery对象$('#btn').click(function(){//3.参数为Dom对象:jQuery函数将Dom封装成jQuery对象并返回。alert($(this).html())//4.参数为HTML文本字符串$('<input type="text" name="msg"></input>').appendTo('div')})})
</script>

7.jQuery对象

1.jQuery对象是jQuery函数的一个实例，该对象可以调用jQuery原型中的方法,也就是我们后面学的很多方法，比如each,map,slice,first,find, filter,not, on,off,css等方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>  
<!-- 1.jquery对象是一个包含所有匹配的任意多个dom元素的伪数组对象2.基本行为*size()/length:包含的dom元素的个数*[index]/get(index):得到对应位置的dom元素*each():遍历包含的所有dom元素*index():得到所在元素的下标-->
<script type="text/javascript">$(function(){//获取所有buttonvar $btns=$('button');// console.log($btns)//需求一 统计有多少个按钮console.log('button个数为'+$btns.size())console.log('button个数为'+$btns.length)//需求二 取出第二个button的文本console.log($btns[1].innerHTML);console.log($btns.get(1).innerHTML);//需求三 输出所有button标签的文本$btns.each(function(index,item){console.log(index,item.innerHTML,this);})//需求四 输出测试三按钮是所有按钮的第几个(下标)console.log($('#btn3').index())})
</script>
</body>
</html>

8.jQuery对象与Dom对象

jQuery对象与Dom对象是两种完全不一样的对象，jQuery对象是jQuery函数的实例，是一个类数组对象，而DOM对象是Node的实例，他们所能调用的方法完全不同。但是它们又有一定的关联性，jQuery对象的类数组的元素为DOM对象，对jQuery对象的操作实际上就是对jQuery数组中DOM对象的批量操作。 jQuery 对象和DOM对象可以相互转化。

Dom对象转化为jQuery对象

<script>//dom为一个DOM对象，$dom为jQuery对象var $dom=jQuerey(dom);
</script>

jQuery对象转化为Dom对象

<script>//获取所有class为one的dom元素，可能多个，$doms为jQuery对象var $doms=jQuery('.one');//获取封装在jQuery对象中的第一个dom对象，doms为dom对象 var dom=$doms[0];
</script>

9.jQuery选择器

9.1基本选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="one"></div><div id="two"></div><div class="one"></div><ul><li></li><li></li><li></li></ul>

<!-- 使用jQuery之前要先引入 --><script>$(function(){//所有选择器$('*').css({background:'red'})//标签选择器$('div').css({background:'red'})//id选择器$('#two').css({background:'red'})//类选择器$('.one').css({background:'red'})//组合选择器（取并集）$('div,li').css({background:'red'})//相交选择器（取交集）$('div.one').css({background:'red'})})</script>
</body>
</html>

9.2层次选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul><li>AAAA</li><li class="box">BBBB</li><li title="hello"><span>CCCC</span></li><li title="hello"><span>DDDD</span></li><span>EEEE</span></ul><script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><script type="text/javascript">$(function(){//选中ul下所有的span selector1 selector2后代选择器// $('ul span').css({//  background:'yellow'// })//选中ul下所有的子元素span selector1>selector2 子代选择器// $('ul>span').css({//  background:'red'// })//选中class为box的下一个li prev+next 下一个兄弟选择器// $('.box+li').css({//  background:'blue'// })//选中ul下的class为box的元素 后面的所有兄弟元素   之后所有的兄弟选择器$('ul .box~*').css({background:'yellow'})})</script>
</body>
</html>

9.3过滤选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="div1" class="box">class为box的div1</div><div id="div2" class="box">class为box的div2</div><div id="div3">div3</div><span class="box">class为box的span</span><br><ul><li>AAAA</li><li title="hello">BBBB</li><li class="box">CCCC</li><li title="hello">DDD</li><li title="two">EEEE</li><li style="display:none;">我本来是隐藏的</li></ul><-- 
基本过滤器
语法：  selector:过滤器
selector:first      获取所有已选择到的元素中的第一个元素
selector:last       获取所有已选择到的元素中的最后一个元素
selector:even   获取所有已选择到的元素中的索引为偶数元素
selector:odd        获取所有已选择到的元素中的索引为奇数元素
selector:eq(index)  获取所有已选择到的元素中的索引为index的元素
selector:lt(num)    获取所有已选择到的元素中索引值小于num的元素
selector:gt(num)    获取所有已选择到的元素中索引值大于num的元素
selector1:not(selector2)获取所有已选择到的元素中除了selector2的元素
selector:header  获取标题h1~h6获取所有已选择到的元素中的标题元素  
内容过滤器
语法：  selector:过滤器           
selector:contains(text)     获取所有已选择到的元素中文本包含text的元素
selector:empty      获取所有已选择到的元素中空元素（没有子节点）
selector:parent     获取所有已选择到的元素中非空元素（有子节点）如$("div:parent")
selector:has(selector2) 获取所有已选择到的元素中包含selector2的元素如$("div:has('span')")      

可见性过滤器
语法：  selector:过滤器
隐藏类型分2种：1. 不占据屏幕空间display:none//input type="hidden"2. 占据屏幕空间visibility:hidden  透明度为0使用： :visible    选择所有占据屏幕空间的元素:hidden 选择所有不占据屏幕空间的元素        属性过滤器
语法：  selector[属性过滤器]
1. selector[attrKey]        获取所有已选择到的元素中具有属性attrKey的元素
2. selector[attrKey=attrVal]    获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
3. selector[attrKey^=attrVal]   获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
4. selector[attrKey$=attrVal]   获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
5. selector[attrKey*=attrVal]   获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
6. selector[attrKey!=attrVal]   获取所有已选择到的元素中具有属性attrKey，并且属性值不为attrVal的元素或者 没有属性attrKey的元素-->
<script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><script type="text/javascript">$(function(){//选择第一个div  获取所有已选择到的元素中的第一个元素// $('div:first').css({//  background:'red'// })//选择最后一个class为box的元素  获取所有已选择到的元素中的最后一个元素// $('.box:last').css({//  background:'red'// })
//选择所有class属性不为box的div // $('div:not(.box)').css({//  background:'red'// })//选择第二个和第三个li元素//多个选择器不是同时执行的，是依次执行的// $('li:gt(0):lt(2)').css({//  background:'red'// })//获取内容为BBBB的li  // $('li:contains("BBBB")').css({//  background:'red'// })//选择隐藏的li :hidden // console.log($('li:hidden').length,$('li:hidden')[0]);//选择有title属性的li元素// $('li[title]').css({//  background:'red'// })//选择所有属性title为hello得li元素$('li[title=hello]').css({background:'red'})})
</script>
</body>
</html>

9.4后代过滤器

/*
后代过滤器
选择器一定要先选择到后代元素，是对选择到的后代元素的过滤,【注意】空格与>（即子代）的区别。

1. selector :nth-child(index)   获取每个selector元素中索引为index的子元素【注意】index从1开始
2. selector :first-child    获取每个selector元素中第一个子元素（每个父元素的第一个子元素）注意与selector :first的区别，获取所有selector元素的子元素中的第一个（只有一   个）
3. selector :last-child     获取每个selector元素中最后一个子元素（每个父元素的最后一个子元素）
4. selector :only-child     获取每个selector元素中独生子子元素（每个父元素如果只有一个孩子元素，获 取该元素）
5. selector :first-of-type  获取每个selector元素中每种类型子元素中的第一个
6. Selector :last-of-type   获取每个selector元素中每种类型子元素中的最后一个        
*/




<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{float: left;border: 1px solid red;width: 100px;height: 30px;}.inner{float: left;border: 1px solid blue;width: 10px;height: 10px;margin: 2px;}</style>
</head>
<body> <div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><script>$(function(){//     //选中每一个outer中的第一个inner//     var $result=$('.outer .inner:first-child')//     $result.css('background','red')//选中每一个outer中的最后一个inner// var $result=$('.outer .inner:last-child')// $result.css('background','red')// :first 只有一个元素，第一个// var $result = $('.outer .inner:first')// $result.css('background', 'red')
// :last 同理// var $result = $('.outer .inner:last')// $result.css('background', 'red')
// 作为别人的第偶数/奇数个孩子var $result = $('.outer .inner:nth-child(odd)')$result.css('background', 'red')})   </script>
</body>
</html>

9.5表单过滤器

/*
表单过滤器：主要是对选择的表单元素进行过滤
:enabled    选取所有可用元素该选择器仅可用于选择支持disabled属性（attribute）的HTML  元素(<button>, <input>,<optgroup>,<option>, <select>,和 <textarea>)
:disabled   选取所有不可用的元素该选择器也是仅可用于支持disabled属性的HTML元素
:checked    选取所有被选中的元素，用于复选框和单选框，下拉框
:selected   选取所有被选中的选项元素，该选择器只适用于<option> 
:focus  选择当前获取焦点的元素
:input  选取所有的<input><textarea><select><button>元素。注意：$(“:input”)是选择可 以让用户输入的标签元素；而$(“input”)是选择名字为input的标签元素
:text   选取所有的单行文本框（<input type="text">）
:password   选取所有的密码框    
表单过滤器：主要是对选择的表单元素进行过滤
:radio  选取所有的单选框
:checkbox   选取所有的多选框        
:submit 选取所有的提交按钮           
:image  选取所有input类型为image的表单元素
:reset  选取所有input类型为reset的表单元素          
:button 选取所有input类型为button的表单元素 
:file       选取所有input类型为file的表单元素

*/<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="#">爱好：<input type="checkbox" name="" id="">篮球<input type="checkbox" name="" id="">足球<input type="checkbox" name="" id="" checked>羽毛球<br>性别：<input type="radio" name="sex" id="" value="male">男<input type="radio" name="sex" id="" value="female" checked>女<br>邮箱：<input type="text" name="email" id="" disabled="disabled"><br>所在地：<select name="" id=""><option value="上海">上海</option><option value="苏州">苏州</option><option value="杭州" selected>杭州</option></select><br><input type="submit" value="提交"></form><script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>$(function(){//选择不可用的文本输入框$(':text:disabled').css({background:'red'})
//显示选择爱好的个数console.log($(':checkbox:checked').length)
//显示选择的性别console.log($(':radio:checked').val())//显示选择的城市名称$(':submit').click(function(){var city=$('select>option:selected').html()alert(city)})})

</script>
</body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Pytorch基础学习笔记
Pytorch小白，目前在follow这个基础课程，在此记录一些笔记和学习的心得~OverviewA basic model training pipeline:PredictionGradients ComputationLoss ComputationParameter Updates The following sections will be arranged as such:SectionPredictionGradients Computat…...
2024/4/16 1:25:28
ffmpeg视频播放器实现详解 - 框架搭建
ffplay是ffmpeg源码中一个自带的开源播放器实例，同时支持本地视频文件的播放以及在线流媒体播放，功能非常强大。FFplay: FFplay is a very simple and portable media player using the FFmpeg libraries and the SDL library. It is mostly used as a testbed for the vario…...
2024/4/19 16:11:17
国产Linux下的录屏软件
屏幕录制是常用的软件工具，也成为桌面会话记录工具。Linux下屏幕录制软件有SimpleScreenRecorder、recordMyDesktop、Vokoscreen和Kazam等1. 中标麒麟中的SimpleScreenRecorder中标麒麟软件中心中附带了有SCR（SimpleScreenRecorder）工具，可以记录其他的应用程序和你的屏幕上…...
2024/4/24 2:54:48
6.5希尔排序（python数据结构与算法）
希尔排序（英语：Shell Sort）：是插入排序的一种。也称缩小增量排序，是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。该方法因DL．Shell于1959年提出而得名。希尔排序是把记录按下标的一定增量分组，对每组使用直接插入排序算法排序；随着增量逐渐减…...
2024/4/16 1:25:28
Git的使用教程
Git的使用教程一．Git的基本命令 1.Git拥有的三个阶段:工作区，暂存区，Git目录。如果Git目录中保存着特定版本的文件，就属于已提交状态，如果文件已经修改并放入暂存区，就属于已暂存。如果自上次检出后，作了修改但还没有放到暂存区域，就是已修改状态。 2.Git前的配置 1./…...
2024/4/18 8:45:31
前端笔记下
第七章 JDBCjdbc(Java DataBase Connectivity)在C语言的Odbc基础上发展而来，是最早的ORM（Object Relation Mapping对象映射关系）工具，可以使用面向对象的Java代码对关系型数据库进行操作。 ORM工具随着不断的发展衍生出了很多框架那么大部分框架都是在JDBC基础上发展而来，…...
2024/4/16 12:14:37
Docker 容器化技术(介绍)
1 虚拟化技术因为 Docker 的容器化技术是虚拟化的一种体现形式,因此我们要学习容器化技术之前,需要先来了解一下什么是虚拟化技术: 1.1 什么是虚拟化技术在计算机中，虚拟化（英语：Virtualization）是一种资源管理技术，是将计算机的各种实体资源，如服务器、网络、内存及存…...
2024/4/20 15:30:02
艺无止境·一路前行——王玉玺先生作品欣赏
王玉玺，笔名桃花园主。中国美术家协会会员，中央国家机关美术家协会理事。现任中国华侨画院副院长，空政军人俱乐部专职画家。先后就读解放军艺术学院、中央美术学院。多次举办个人画展，出版个人画集多种。主攻人物，他的都市女郎有他独特的审美和寓意，用意象野逸而又澄明纯…...
2024/4/24 21:29:52
笑脸数据集和口罩数据集
文章目录掌握笑脸数据集(genki4k)正负样本的划分、模型训练和测试的过程(至少包括SVM、CNN训练数据集需要导入的库：对数据集设置训练测试集、正负样本路径定义打印出训练集和测试集的正负样本尺寸函数输入函数（函数包括对模型的训练，模型优化、和模型保存、以及模型精度）摄…...
2024/4/16 1:25:08
02 ，线性回归：误差项分析
1 ，误差项：产生原因 ( 预测与真实的差异 )原因：预测值与真实值之间是存在差异的例如： 1 ，红色点：是真实值 2 ，平面：是预测值公式解释：真实值 = 预测值 + 误差如图：2 ，误差项：数据大小预测值：我们计算的值真实值：实际的数据误差值：真实值与预…...
2024/4/16 1:25:49
JavaScript中this的意义整理
前言本文参考了Programming with Mosh的YoutTube视频以及廖雪峰老师的JavaScript教程。总体来说，this代表正在执行当前函数的对象（object）。 1. this位于函数中对于普通的函数，this指向全局（global），举例： function eatFruit() {console.log(this); }eatFruit();此…...
2024/4/16 1:25:54
英语Grammar——并列句
1、什么是并列句就是在两句话中间加连词2、常见的连词平行关系：and、not only....but also、neither...nor...（两个都不要）、either...or...（两个当中选择其中之一）。转折关系：but、yet、while、wheresa。递进关系（顺承）：then。因果关系：for；so。选择关系：or。常见…...
2024/4/24 13:25:45
【MOM专题】2020第26周，男女平等促进经济发展
Tableau问答交流群及全球Tableau粉丝，又一次担当起他们的社会责任，以MOM作业为契机，用数据可视化作品，分析经济发展数据，揭示男女平等对经济的促进作用。一不留神，又产生了一期精彩的数据可视化作品集，请各位enjoy！大神们怎么让枯燥的数据变得有趣？看看一小部分精彩…...
2024/4/16 1:25:03
MobileNet-SSD训练自己的数据集
仅作笔记整理搬运使用，没有任何程序原创部分，主要给自己提个醒，避免重复搜索工作一、配置 ubuntu18.04 ，显卡驱动，cuda10.1，cudnn7.6.5 查看cuda版本: cat /usr/local/cuda/version.txt 查看cudnn版本： cat /usr/local/cuda/include/cudnn.h | grep CUDNN_MAJOR -A 2 二…...
2024/4/16 1:26:09
小秘谈币： 7.11 BTC行情分析多空较平衡状态，走势有待发展
据波网Boboo.com交易大数据显示，截至7月11日9:00，BTC永续合约报价9281.0美元，较现货价格（9278.50美元）高出2.5美元，合约价格保持升水状态，较昨日升水（3.61美元）微幅下降；多空持仓比为0.96，较昨日（1.34）下降明显；永续合约资金费率为-0.0001%，资金费率由正转负。多…...
2024/4/26 12:13:27
python爬虫之多线程爬虫
多线程 1.多线程介绍如果我们把CPU比作一个工厂，这个工厂里面有多个车间，每一个车间就是一个进程；每一个车间有多个工人，每一个工人就是一个线程。我们之所以要学习多线程就是为了在同一时间里完成多项任务。 python中的多线程使用的是threading模块。我们来看下面的一个…...
2024/4/16 1:26:40
JavaWeb复习（二）：会话技术
JavaWeb复习（二）：会话技术Cookie&SessionJava Web复习第二弹会话技术：Cookie、Session一、会话技术 1.1 概念会话指一个终端用户与交互系统进行通讯的过程，比如从输入账户密码进入操作系统到退出操作系统就是一个会话过程。会话较多用于网络上，TCP的三次握手就创建…...
2024/4/20 21:20:56
springMvc5 - 自定义数据转换器
来源：https://www.bilibili.com/video/BV1GE411d7KE?p=7 目录String 转 DateString 转 Student 数据转换器：客户端 HTTP 请求中的参数转为业务方法中定义的形参 HandlerApdter 提供通用的转换：String 转 int，String 转 double，表单数据的封装特殊的业务场景下，Handle…...
2024/4/19 10:11:42
MySQL select查询语句
##Select 查询语句查询所有： select * form 表名; 条件查询：select * form 表名 where 条件; 模糊查询：下划线_代表一个占位任意字符，百分号%代表0或多个占位字符。select * form 表名 where name like ‘%菜%’; --查找带有菜的名字，无论菜的位置在名字第几个字。sele…...
2024/4/16 8:11:02
PMP第一章：引论（2）
六、项目阶段定义:是一组具有逻辑关系的项目活动的集合，通常以一个或多个可交付成果的完成未结束。通用结构：启动项目（概念阶段）组织与准备（开发/规划阶段）执行项目工作（实施阶段）结束项目（收尾阶段）阶段管理要求：明确定义起止时间定义准入标准（如：获启动文件审批…...
2024/4/16 1:25:49

jQuery总结(一)

jQuery(一)

1.什么是jQuery

2.jQuery优势及特点

3.jQuery常用网站

4.jQuery引入

5.jQuery入口函数的写法

6.jQuery函数

7.jQuery对象

8.jQuery对象与Dom对象

9.jQuery选择器

9.1基本选择器

9.2层次选择器

9.3过滤选择器

9.4后代过滤器

9.5表单过滤器

相关文章

最新文章