js与jQuery的区别以及jQuery选择器和方法的使用
目录
使用jQuery
官网：http://jquery.com/
打开jQuery官网首页：write less,do more 写的少做的更多
建议下载开发版本
js与jQuery代码对比
jQuery选择器：用来选中元素
1.1：基本选择器
基本方法
通配符：如果选中所有的元素 可以直接用通配符 * 表示所有。
并集：selector1,selector2,用逗号隔开
交集：selector1 selector2 用空格隔开
多个选择器(并集)：selector1,selector2：
多个选择器(交集)：selector1 selector2
层次选择器:
>:子选择器
:gt 大于
:lt 小于
使用jQuery
jQuery是什么：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。
官网：http://jquery.com/
为什么要学jQuery：可以简化JavaScript开发，jQuery中包含有：选择器，CSS样式，HTML事件处理，JS动画 以及丰富的插件等等，而且浏览器兼容性很高
打开jQuery官网首页：write less,do more 写的少做的更多
为什么要用jQuery？很简单，就一句话，因为用的人多。我们可以先看一下比较流行的前端框架https://www.bootcdn.cn/
了解一下Bootstrap 现在企业用的非常的多，还有React、jQuery、Angular.js、Vue.js这些前端框架是目前企业用的非常多的
Vue.js 目前移动端 微信端用的前端框架最多的
什么情况下用jQuery：中大型网站开发，一些前端框架的基础，比如EasyUI
怎么用：我们今天开始用HBuilder写代码，我们中国人开发的软件呦！具体怎么代码怎么写，小伙伴们跟着我看疗效。
准备工作：
- 下载jQuery库：
- 登录jQuery官网http://jquery.com/
- 点击下载
有三种版本：
- Download the compressed, production jQuery 3.3.1生产版本
- Download the uncompressed, development jQuery 3.3.1开发版本
- Download the map file for jQuery 3.3.1
建议下载开发版本
2、HBuilder使用 创建项目
3、把jQuery库复制到项目中的js文件夹中
4、引入jQuery库文件:
注意：script标签中不要写内容，写jQuery代码就再写一对script标签
js与jQuery代码对比
案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图
JS版：
jQuery版：
先引入jQuery库
jQuery选择器：用来选中元素
1.1基本选择器
1.2层次选择器
1.3过滤选择器
1.4表单选择器
1.1：基本选择器
基本选择器包括：
ID选择器 #：#标签id名
类选择器 . ：.标签name名
元素选择器 ：标签名 元素选择器又叫做标签选择器 直接用标签名来选中。
基本方法
通配符：如果选中所有的元素 可以直接用通配符 * 表示所有。
选择器还可以组合多个一起使用，可以分为并集和交集。
并集：selector1,selector2,用逗号隔开
交集：selector1 selector2 用空格隔开
下面我们用代码分别实现一下不同选择器实现效果的方式：
案例2：使用基本选择器改变元素背景色和字体颜色(div、p、span)
我们先来写两个div用来对比一下一个添加一个id属性，一个添加一个class属性
<h2>2、基本选择器</h2><div id="one">我是第一个盒子</div><div class="two">我是第二个盒子</div>然后我们再来看jQuery代码怎么写，首先 我们要找到第一个div然后在修改它的背景色，那么怎么写呢？大家来看
$("#one") 找到id为one的div 接着再修改背景色，直接在后面点，点不出来提示，那么来看一下怎么让他有提示。点击语法提示库，对。选择jquery.2。现在还可以 好歹有点提示了。那么背景色的css属性单词是哪个？伙计们还记得么？background 对的。我们接着直接修改属性 值就OK了，非常简单：
$("#one").css("background","green");现在我们已经把id为one的div的背景色修改为了绿色。如果我现在要修改为红色，该怎么写？
好，那么我们接着试一下用类选择器该怎么实现：同样的，我们还是需要先找到div，只不过这次不是根据id找，而是根据class类来找。该怎么写？
刚刚id选择器用#,现在我们用类选择器 应该是什么？对 用点
$(“.two”)。再接着我们把背景色修改为yellow：$(".two").css("background","yellow");怎么样？就是这么简单！
我们先注释一下，那么我们现在可不可以直接设置两个div的背景色统一都为红色，来看一下 该怎么写？同样的刚才我们分别用id选择器和 类选择器 找到了一个div然后设置背景色就可以了。现在我们是不是要设置所有div的背景颜色。那么我们可不可以直接根据div标签来设置。那么我们来用元素选择器来试一下，首先先找到div：$(“div”)找到所有的div，然后设置背景色:$("div").css("background","red");
如果是现在我想设置div背景色的同时，再把div中的字体颜色设置为粉色，大家来看一下该怎么写！现在我们要同时设置两个属性，背景色和字体颜色。那么这种同时要设置多个样式时格式该咋写？
一样的，首先找到div：$("div")，再接着设置样式，只不过现在要设置多个，那么就要把之前的逗号改为冒号，然后后面逗号再接着写第二个属性 ：$("div").css({"background":"red","color":"blue"});设置多个样式属性时，一定要注意语法格式，一定要细心细心再细心。
通配符：* 接着我们来看一下* 这个有什么用。来，我们直接把上面的代码再写一遍，把选择器改为* 看一下效果:
$("*").css({"background":"pink","color":"blue"});，哎呦我去，全粉了。正如大家所料，*表示所有，那么就是给所有的元素设置属性了。
多个选择器(并集)：selector1,selector2：
接下来我们来看一下如果我们想把网页中所有的p标签 和 span标签字体全部变成 粉色的该怎么写？首先我们同样的是给所有的p标签 和 span标签设置样式，我们可以直接用元素标签，先写一个p，然后还要再加上span：$("p,span").css("color","pink"); 来，我们看一下疗效。所有的p 和 span 不管是在div内的 还是在div外边的全部受到影响。这种写法我们叫做多个选择器 并集。
多个选择器(交集)：selector1 selector2
那么有并集 应该也会有交集。什么是交集，我们来写一下看看。
$("#one p").css("color","pink");大家觉得这句代码写完，有几句话字体会变色？来 看一下疗效，只有一句话变了颜色。这句话是id为one的div中的p标签。那么大家来想一下，这种空格的 写法表示什么意思？
指定标签内的标签，对的。
那么现在咱们玩点刺激的，现在我在第一个div里面的p段落中再加点东西<p>我是第一个div中的 <span>第一个p标签</span></p>。现在呢，我想只改变 第一个p 这几个字的颜色，大家来看一下该怎么写？前面我们写过$("#one p").css("color","pink");，设置div中的p标签，现在要设置的是div中的p中的 span，该怎么写？哎 对，只需要再来一个空格 然后加上一个span就OK了：
$("#one p span").css("color","pink");
怎么样，今天的课不难吧，会找标签，记住语法格式就OK了
jQuery的核心就是查询
层次选择器:
我们来看一下在线api，找到选择器，来看层级选择器，这里面有四个，第一个 刚才我们已经讲过了。叫什么来着？交集还是并集？
>:子选择器
首先我们来看一下大于号这个，看一下文档上面的解释：用以匹配元素的选择器，并且它是第一个选择器的子元素。大家注意解释说什么？第一个选择器的子元素？ 那么大家来猜一下，这个大于号表示什么意思？又该怎么用？文档解释很明显，就是找到第一个选择器中的指定的子元素。那么我们先来看一下：
<div id="one">我是第一个盒子<p>我是第一个div中的 <span>第一个p标签</span></p><span>我是第一个div中的 第一个span标签</span></div>这段代码中，有几个span，假如我现在想要设置这两个span标签的颜色 该怎么写？只设置p标签中的span又该怎么写？
设置两个span：$("#one span").css("color","pink");
设置p中的span：$("#one p>span").css("color","pink");
先找到div中的p标签，然后再找到p标签中的子标签 span
+:兄弟选择器，同级的第一个
接下来 我们来看一下这个 + 又是什么意思？意思很简单 同级，兄弟级别，那么什么是同级。先来看一下代码:
<div id="one">我是第一个盒子<p>我是第一个div中的 <span>第一个p标签</span></p><span>我是第一个div中的 第一个span标签</span></div>我们以这个代码为例来试一下：
$("#one p + span").css("color","pink");
来 看一下效果，div中总共有两个span现在哪一个span受到了影响？是p里面的 还是和p标签同级的？ 哎 对了 这就是+的作用
注意 这里面的同级只会得到第一个，也就是只有一个，不会找到其它的同级选择器
~:同级的所有选择器
上面我们说了同级的第一个选择器，我们接着试试看这个是同级的几个选择器。先来看一下代码:
<div id="one">我是第一个盒子<p>我是第一个div中的 <span>第一个p标签</span></p><span>我是第一个div中的 第一个span标签</span><span>我是第一个div中的 第2个span标签</span><span>我是第一个div中的 第3个span标签</span><p>我是第一个div中的第二个p标签</p></div>我们直接来试一下看看疗效:
$("#one p~span").css("color","pink");效果很明显，div中的所有和p标签同级的span标签全部受到影响，其它的同级标签不会受到影响
过滤选择器：
获取第一个元素:first
我们先写一个ul
<ul><li>11111</li><li>22222</li><li>33333</li><li>44444</li><li>55555</li></ul>First 第一个，那么大家来猜一下 我现在写的这段代码会有什么效果:
$("ul li:first").css("color","pink");
最后一个元素:last
现在再来看一下这个:$("ul li:last").css("color","pink");一个是第一个，一个是最后一个 咋样 简单吧！
获得奇数元素:even
大家先来看一次even是什么意思？奇数？ 不不不 是偶数的意思。这个地方很神奇，为嘛呢？因为外国的第一个是0，第二个是1，第三个是2，那么刚好在这里，奇数 表示的是偶数个，偶数表示的是第奇数个。咋样，感觉刺激不，晕不晕？来直接看一下疗效：
$("ul li:even").css("color","pink");第一行，第三行，第五行受到影响
获取偶数元素:odd
那么我们接着来看这个 odd 上面是奇数行，那么这个很明显了。但是大家一定要注意这两个单词的意思。odd的意思是奇数。even的意思是偶数
$("ul li:even").css("color","pink");
获取某一范围元素:
:gt 大于
现在我们来试一下让大于第一行的li背景色全部改变:
$("ul li:gt(0)").css("background","pink");注意啦，这个地方和其他的不一样居然有参数了，这个参数表示第几行的下标，而且不包括下标表示的行，那么这个效果很明显是大于下标0的行
:lt 小于
再来试一下这个，刚才那个是大于，不包括参数行，现在这个我们再来看一下：$("ul li:lt(4)").css("background","pink");同样的参数行从0开始，不包括参数表示的行
范围：第二行到第四行
现在咱们再来个刺激一点的，掐头去尾，除了第一行，和最后一行，其它的全部选中。我们来试一下我们现在要找到大于0的然后再找到小于4的。代码是不是可以这样写:
$("ul li:gt(0):lt(4)").css("background","pink");我们来看一下效果，哎，最后一行也选中了，为啥不行呢？我们来分析一下，我们先找到的是大于0的 也就是后面的都包括了，然后再去选中其它的，在这里我们想要选中范围内的 需要先确定 最大 的位置，然后再选中其它的，所以上面的写法是不正确的。我们应该先确定最大的：$("ul li:lt(4):gt(0)").css("background","pink");来看一下这个，对了吧。所以这个地方大家一定要注意一下。第一种写法每个li的下标会改变。
表单选择器：
我们先来看一下文档中的表单选择器，这里面基本上表单中的每一个元素都有，我们主要讲一下单选，多选 和 下拉框的选择器。我们先写一下网页代码写个表单：
<form method="post">性别:<input type="radio" name="sex" id="" value="男" checked="checked" />男<input type="radio" name="sex" id="" value="女" />女 <br>爱好:<input type="checkbox" name="hobby" id="" value="eat" />吃饭<input type="checkbox" name="hobby" id="" value="sleep" />睡觉<input type="checkbox" name="hobby" id="" value="playDD" />打豆豆<br>地址：<select><option value ="1">长沙市</option><option value ="2">南阳市</option><option value ="3">武汉市</option></select><br><input type="button" name="" id="ok" value="提交" /></form>单选按钮：
我们先来看一下怎么获取被选中的单选按钮的值怎么获取。我们先给按钮添加一个点击事件，点击按钮获取被选中的单选框的value属性值。
/* 表单选择器 *///给提交按钮添加点击事件$("#ok").click(function(){//获取表单中被选中的单选按钮的值 :radio表示单选按钮 :checked表示被选 //中的var sex = $(":radio:checked").val();alert(sex);})在这里建议一下小伙伴们后面测试不要用alert弹了。我们以后统一用：confole.info(sex);然后在页面按F12选中控制台 看输出结果
多选按钮：
多选按钮和单选按钮呢 基本上是一样的，来我们对比着上面的写一下试试。
var len = $(":checkbox:checked").length; Console.info(len);先测试一下能不能获取到选中的选项个数。
既然能获取到选中的选项个数，我们接着来获取值。不过多选框选中的可能有多个值，所以这个地方需要each遍历。这个地方写法有点复杂，大家注意一下。
var len = $(":checkbox:checked").each(function(){var hobby = $(this).val();console.info(hobby);});直接在each里面写匿名函数遍历选中的选项，$(this).val();表示选中的选项的value值
下拉：
接着看咱们的最后一个 下拉。下拉要注意了，单选 和多选直接就是找到选中的选项就行，可是下拉select标签中还有标签，我们要获取的是select中option选项的值，所以这个地方要注意写法。
var address = $("option:selected").val();获取option标签的value属性值
那如果想要获取长沙市，武汉市，不是获取value值呢？可以获取到吗？
var address = $("option:selected").html();option标签可以直接这样获取到标签内的网页文本。
js与jQuery的区别以及jQuery选择器和方法的使用相关推荐
- screen,client,page三种确定鼠标坐标的区别和原生JS事件写法，区别于Jquery的$.on(x,y);和$.click()...
screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scre ...
- css中.prepend,js prepend() 和append()区别
prepend() 方法在被选元素的开头(仍位于内部)插入指定内容. prepend() 语法:$(selector).prepend(content) 或 $(selector).prepend(f ...
- day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、 对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
- JS对象与Dom对象与jQuery对象之间的区别
前言 通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
- 原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
- JS和JQUERY的区别
JS和JQUERY的区别 ①.根据ID取元素 { JS:取到的是一个DOM对象. 例:var div = document.getElementByID("one"); JQUER ...
- JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结 ...
- zepto和jquery的区别，zepto的不同使用8条小结
1. Zepto 对象 不能自定义事件 例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'a ...
- Dom对象、JavaScript对象、jQuery对象区别
一.Dom对象.JavaScript对象.jQuery对象 1.1 Dom对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型 ...
最新文章
- struts配置文件没有标签提示
- 解决pytorch半精度amp训练nan问题
- PCA和白化练习之处理图像
- MySQL数据库的可视化管理工具连接时一些问题解决~
- 协议crc计算_从零了解modbus协议 第三篇
- 特征图注意力_从数据结构到算法：图网络方法初探
- 打造个人专版为CMD加上一把锁
- java实现电子面单pdf生成_快递鸟电子面单接口打印实现代码
- http下载大文件测试
- 微单相机和单反相机的区别？摄影入门第一课
- 下载chrome插件离线包
- 2019QS世界大学学科排名重磅发布！
- .net NPOI读写Doc文件
- EXCEL如何设置下拉选项打勾 + 不正常选项拉红
- 计算机类sci中接受综述么,SCI期刊接受的5大类型文章
- 阴阳师召唤式神app（安卓）
- Xposed模块开发教程，该篇讲解通俗易懂，所以转发
- 一个Android下的自动下载歌词的代码
- AIoT-人工智能物联网
- CQ: 字节系创作质量中台实践