jquery 判断是否有类名_JQuery 基础(一)

最新推荐文章于 2020-11-21 21:53:15 发布
最新推荐文章于 2020-11-21 21:53:15 发布
阅读量474 收藏 1
点赞数
文章标签： jquery 判断是否有类名 jquery 给类名元素添加行内样式

4290e8208c73f78f6b3ebac7c3c905eb.png
封面图片来源：沙沙野

内容概览

  1. jQuery 本质
  2. jQuery 中，提供一个入口函数
  3. jQuery 获取标签元素
  4. jQuery 过滤元素的方法
  5. jQuery 中选择器的关系操作
  6. jQuery操作元素的属性
  7. jQuery 操作元素的样式
  8. jQuery 的链式编程
  9. jQuery 的事件操作
  1. jQuery 本质上就是一个装满了 JS 函数的文件，因此引入 jQuery 还是使用 script 标签
<!DOCTYPE html>

​ 运行结果如下，按 F12，查看 Console 栏里打印的信息

7c09cd08c8dcb2042743f35937f4441c.png

2. 让 js 代码在页面加载完成以后执行，之前是用 window.onload 来完成 jQuery 中，也提供了一个页面加载函数，即入口函数

<!DOCTYPE html>

​ 运行结果如下，同时查看 Console 栏里打印的信息

b3267ed39ca8bf147b896a449905f610.png

3. jQuery 获取标签元素

  • jQuery 为了简化 js 获取元素的操作，参考了 CSS 选择器的规则
  • jQuery 还额外提供了一些 CSS 没有的选择器
  • jQuery 根据选择器设计了一套获取元素的方法

4. jQuery 常用选择器的写法

  • $("#test"); // 获取 id 为 test 的元素
  • $(".myClass"); // 获取所有 class 为 myClass 的元素
  • $("li"); // 获取所有的 li 元素
  • $("#ul1 li span"); // 获取 id 为 ul1 元素下的所有 li 下的所有的 span 元素
  • $("input[name=first]"); // 获取所有 name 为 first 的 input 元素
  • $("p, h1"); // 获取所有的 p 元素和 h1 元素
  • $(".list li:odd"); // 获取 class 为 list 的所有元素下所有下标(索引号)为奇数的 li
  • $(".list li:even"); // 获取 class 为 list 的所有元素下所有下标(索引号)为偶数的 li
  • $("input[name=fav]:checked"); // 获取 name 为 fav 的所有被选中状态的 input 元素，用于多选框

5. 使用 CSS 的选择器作为 $() 的参数，可以直接获取 html 元素，而且可以获取多个

  • $("#id") // id选择器
  • $(".class") // 类选择器
  • $("ul li") // 层级选择器
  • $("h1, div") // 群组选择器

6. 不管 jQuery 使用选择器是否获取到元素，都会返回类似数组的 jQuery 对象，目的有两个：

  • 方便开发者获取元素以后直接继续使用jQuery的其他操作方法
  • 防止报错

7. 可以在获取元素以后，直接使用 .html() 获取元素的内容

8. 可以在获取元素以后，直接使用 .css() 操作元素的属性

<!DOCTYPE html>

​ 运行结果：

ffd60767d8938d2de7c2359d5a1b0d8e.png

db22f5dc1531f6b0deae1dc90e9e5ee7.png 
<!DOCTYPE html>

​ 运行结果：

502285bb5e4fbb754239c655db924aea.png

9. jQuery 提供了以下过滤元素的方法

  • $("div").has("p"); // 选择包含 p 元素的所有 div 元素
  • $("div").not(".myClass") // 选择 class 不等于 myClass 的所有 div 元素
  • $("div").eq(5); // 选择所有 div 元素中下标为 5 的 div 元素(因此可以用在循环中)
<!DOCTYPE html>

​ 运行结果：

b539de53d97df49b465ee05c0527064e.png

10. 选择器的关系操作： jQuery 中提供了允许通过标签之间的关系来选中目标的其他关系元素,通过指定元素获取其所有子元素等。在 jQuery 中除了可以使用选择器来获取元素以外，还可以利用标签之间的嵌套[父子]关系或者并列[兄弟]关系来操作元素

    • $('#box').prev(); // 选择 #box 元素前面紧挨的同辈元素
    • $('#box').prevAll(); // 选择 #box 元素之前所有的同辈元素
    • $('#box').next(); // 选择 #box 元素后面紧挨的同辈元素
    • $('#box').nextAll(); // 选择 #box 元素后面所有的同辈元素
    • $('#box').parent(); // 选择 #box 元素的父元素
    • $('#box').children(); // 选择 #box 元素的所有子元素
    • $('#box').siblings(); // 选择 #box 的元素的同级元素
    • $('#box').find('.myClass'); // 选择 #box 的元素内的 class 等于 myClass 的子孙元素
<!DOCTYPE html>

​ 运行结果：

c33ddf72b518edc2db61670c378b6f0d.png 
<!DOCTYPE html>

​ 运行结果：

8c68619f4856f811472804728c7e0a89.png

11. jQuery操作元素的属性

    • $("#img1").attr("src"); // 1.6 版本以下使用这个，1.6 以上操作表单的时候，需要换成 prop
    • $("#img1").prop("src");
    • $("#fav").prop("checked"); // 用于单选框或者复选框

12. 设置元素的属性值

    • $('#img1').attr("src","test.jpg"); // 1.6 版本以下使用这个
    • $('#img1').prop("src","test.jpg");
    • $('#img1').prop({"src": "test.jpg", "alt": "Test Image" });

13. jQuery操作元素的属性总结

    • 获取属性，需要传递一个属性名称参数传递到 prop 方法中，否则 jQuery 不清楚我们要获取哪个属性
    • 设置如果是设置一个属性，可以给 prop 传递两个参数：prop("属性名","属性值");
    • 设置多个属性，只需要传递一个 js 对象参数：prop({"属性1":"属性值1","属性2":"属性值2",.....});
<!DOCTYPE html>

​ 运行结果：

8a427af0b1d5b095d83ec580b327bc97.png 
<!DOCTYPE html>

​ 运行结果：

0fc042f534398195b482b7b2f926786b.png 
<!DOCTYPE html>

​ 运行结果如下，点击全选、反选按钮都有反应

6acd51160a188fd7b4d32ddd00ac4c42.png

14. jQuery 操作元素的样式

    • 获取元素的 css 样式
    • $("div").css("width");
    • 设置元素的 css 样式
    • $("div").css("width","30px");
    • $("div").css("height","30px").css("background","red");
    • $("div").css({"font-size":"30px","color":"red"}); // 同时设置多个样式属性
    • jQuery 操作样式类名改变元素的样式
    • $("#div1").addClass("divClass2") // 为 id 为 div1 的对象追加样式 divClass2
    • $("#div1").removeClass("divClass") // 移除 id 为 div1 的对象的 class 名为 divClass 的样式
    • $("#div1").removeClass("divClass divClass2") // 移除多个样式
    • $("#div1").toggleClass("anotherClass") // 重复切换 anotherClass 样式

15. jQuery 操作元素的样式总结

    • jQuery 提供了 css 方法和 addClass 等给我们操作元素的样式属性
    • css 的使用
    • 获取元素的外观样式 css("样式名称");
    • 设置元素的外观样式 css("样式名称","样式值"); css({"样式名称1":"样式1的值","样式名称2":"样式2的值",...})
    • 添加样式类名 addClass("样式类名1 样式类名2");
    • 移除样式类名 removeClass("样式类名1 样式类名2");
    • 切换样式类名 toggleClass("样式类名");
    • css() 不仅可以获取行内样式，还可以获取嵌入式或外链式的样式
<!DOCTYPE html>

​ 运行结果如下，点击"开灯"按钮，背景颜色会变化

e099638774a532876ba99b07a0ca1dbe.png

78128b48615f52191f9a272bce9e5246.png

16. jQuery 的链式编程

    • 在 jQuery 中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）进行操作，那么可以使用 .语法(点语法)，一直写下去
    • $("#box").css("background", "pink").css("font-size":"29px");
    • $("#box").siblings().css("background", ""); 可以写成： $("#box").css("background", "pink").siblings().css("background", "red");
    • 链式编程的实现原理
    • jQuery 可以让我们开发者一直使用点语法调用自身方法的原理。主要原因是jQuery 内部利用了 js 的对象来实现，在 Python中，我们知道 self 在方法内部表示当前对象自身；同理，js 的方法中也有一个this表示当前对象
    • 总结：
    • 实现链式编程的核心，是对象中的每一个方法都会返回当前对象
    • 在方法中，js 提供一个 this 的关键字，表示当前对象
<!DOCTYPE html>

​ 运行结果：

65e10dc05f8a9b811e6b9d90dc423bd7.png

17. jQuery 的事件操作

<!DOCTYPE html>

​ 运行结果如下，注意：将鼠标移到 "商品列表" ，发现会自动下拉一个菜单

ddbc3cab879e6fe19837cfba1349a928.png
weixin_39722921
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何使用jQuery检查元素是否具有特定的类名
一名可爱的技术搬运工
05-20 821
jQuery带有两种方法来检查元素是否具有特定的类名。 两种方法具有相同的功能。 是（'.classname'） hasClass（'。classname'） 例如，检查div元素是否具有“ redColor”类名。 1. is（'。classname'） $('div').is('.redColor') 2. hasClass（'。classname'） $(...
jQuery中的类名选择器（.class）用法简单示例
10-18
主要介绍了jQuery中的类名选择器（.class）用法,简单介绍了jQuery类名选择器的概念、原理并结合实例形式分析了类选择器的简单使用方法,需要的朋友可以参考下
使用jquery判断一个元素是否含有一个指定的类(class)实例
12-11
在jquery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。 2 种方法如下：  1. is(‘.classname’) 2. hasClass(‘classname’) 以下是一个div元素是否包含一个redColor的例子： 1. 使用is(‘.classname’)的方法 $(‘div’).is(‘.redColor’) 2. 使用hasClass(‘classname’)的方法(注意jquery的低版本可能是hasClass(‘.classname’)) $(‘div’).hasClass(‘redColor’)以下是检测一个元素是否含有一
JQuery操作attr、prop、val()/text()/html()、class属性
weixin_30851409的博客
05-23 102
1.1 arr操作 设置单个属性 // 第一个参数：需要设置的属性名 // 第二个参数：对应的属性值 // $obj.attr(name, value); // 用法举例、 $('img').attr('alt','不错哦'); 获取属性 // 传需要获取的属性名称，返回对应的属性值 // $obj.attr(name) // 用法举例 v...
jquery 判断是否有类名_Day037-JS、jQuery
weixin_39636610的博客
11-21 124
第73次(JavaScript)学习主题：JavaScript学习目标：1 掌握js的表单验证2 熟练敲出制作购物车代码,尽量不要看老师的代码1. 表单验证A(1) 如何可以产生一个4位的随机数验证码Math.floor(Math.random()*9000+1000)(2) 如何控制表单是否提交的通过设置form表单中的onsubmit=”return check()”，根据自定义的检查函数ch...
jquery 判断是否有类名_我现在写jquery，你们会不会打我？？
weixin_39628247的博客
11-21 100
时光荏苒，岁月如梭，转眼多年过去。前端天下已各分东西，回眸看看来时的路，你我可曾记得当年的大哥 jquery。回想那个纯真的年代，jquery一统天下，前端的世界如此纯洁无瑕。引子此时此刻又让我想起了当年的游戏时光，早期游戏只能玩类似《传奇》《魔力宝贝》这么些。大家没得选所有人都会玩这么几款游戏，随着时间推移现在游戏越来越多,忽然发现可以玩的游戏却少了，前端世界也是如此，框架技术层出不穷，很多前端...
jquery-easyui.zip_easyui框架_html 框架_jquery-easyui
09-21
EasyUI 是一个基于 jQuery 的轻量级前端框架，它为开发者提供了一系列的组件和插件，使得构建交互式用户界面变得更加便捷。这个压缩包“jquery-easyui.zip”包含了使用 EasyUI 实现的一个HTML框架，它主要用于简化...
jQueryAPI_CHM_chm_jqueryapi_
10-03
4. **动画**：jQuery的动画效果是其广受欢迎的原因之一。`$(selector).fadeIn(speed)`使元素淡入，`slideUp(speed)`让元素滑动隐藏，`animate()`方法则可以自定义复杂的动画效果。 5. **Ajax交互**：jQuery提供了...
jquery图片背景高亮闪烁.rar_jquery图片背景高亮闪烁_jquery图片闪烁
09-24
例如，如果我们想让一个类名为"highlight"的图片元素实现闪烁效果，我们可以这样写： ```javascript $(document).ready(function() { $('.highlight').hover(function() { $(this).toggleClass('highlighted'); ...
jQuery计数器动画特效插件.rar_jQuery计数器动画特效插件_smooths5u
09-24
jQuery计数器动画特效插件是一种用于网页动态展示数字变化效果的工具，它能够将静态的数字以平滑、动态的方式展示出来，增加用户界面的交互性和吸引力。在这个名为"smooths5u"的插件中，我们主要关注的是如何使用...
jquery中判断元素是否含有某个类名
业余前端的职业经历
06-23 2143
两种方式解决 1.hasClass(className) 2. is(’.’+className); // 版本过低 可能hasClass 不会成功 博主测试了 1.11.3 还是可以的 <div class="parent"> hello world </div> <script> console.log($('div').hasClass('parent')); // true console.log($('div').is('.parent'))
怎么使用jquery判断一个元素是否含有一个指定的类（class）
鱼里别放刺
11-15 1943
怎么使用jquery判断一个元素是否含有一个指定的类（class） 在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class)。两种方法有着相同的功能。2种方法如下： 1.jQuery是否含有指定的类（class）使用 is(‘.classname’)的方法 2.使用 hasClass(‘classname’) 的方法(注意jquery的低版本可能是hasC
判断具有某个属性js、jQuery
weixin_33748818的博客
07-16 71
　　 if(!rr.classList.contains('invalid')){ updateCount(i,-1);//更新tab数量 } /*if(!$(rr).hasClass('invalid')){ updateCount(i,-1);//更新tab数量 }*/ 转载于:https://www.cnblogs.com/yanan7890/p/7156919.h...
c#判断类名规范
suneboy的专栏
10-25 723
//检测类名是否符合规范         public static bool CheckClassName(string className)         {             if (string.IsNullOrEmpty(className))             {                 return false;             }
在jquery中怎么使用css类名和id来获取元素？
weixin_30496751的博客
03-07 196
在jquery中，你可以很容易的使用CSS类名和id类获取元素。 例如： 1.ID:#id $('#idA')——选择id为idA的所有元素，不管元素的标签名如何。 $('div#idA')——选择id为idA的所有div标签元素。 2.Class：.classname $('.classB')——选择类名有一个为classB的所有元素，不管其标签名如何 $('div.classB'...
jquery判断元素有没有此类名
LeeNingfeng的博客
03-09 7013
&lt;script&gt; $("div").hasClass("className");// 返回的是true或者是false; if($("div").hasClass("className") == false){ alert("不存在此类名"); } if($("div").hasClass("className&q
jquery判断某个元素是否包含某个类名
热门推荐
hardgirls的博客
09-10 2万+
通过某个类名进行筛选：    用jquery的       1、is(‘.classname’);      2、hasClass(‘classname’)；    这两个方法是比较常见的，返回的是true或者是false；
jquery中判断元素是否包含某个类名的方法是
最新发布
03-16
使用jQuery的hasClass()方法来判断元素是否包含某个类名。该方法返回一个布尔值，如果元素包含该类名，则返回true，否则返回false。例如： if ($("#myElement").hasClass("myClass")) { // do something }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值