jQuery第二天

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量66 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59708269/article/details/124744635
版权
本文详细介绍了HTML的基本选择器、层次选择器和过滤器选择器，以及如何使用jQuery来操作这些选择器实现元素的选取和样式设置。内容涵盖ID选择器、元素选择器、类选择器、组合选择器、层次选择器如后代、子元素、相邻和后续兄弟选择器，以及过滤器选择器如第一个、最后一个、属性过滤等。通过实例展示了如何选取特定元素并改变其背景颜色，帮助读者深入理解网页元素的选取和操作。
摘要由CSDN通过智能技术生成

一.基本选择器

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>05_基本选择器</title>
</head>

<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>

<br>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB(title="hello")</li>
  <li class="box">CCCCC(class="box")</li>
  <li title="hello">DDDDDD(title="hello")</li>
</ul>

<!--
1. 是什么?
  - 有特定格式的字符串
2. 作用
  - 用来查找特定页面元素
3. 基本选择器
  - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选择id为div1的元素
   2. 选择所有的div元素
   3. 选择所有class属性为box的元素
   4. 选择所有的div和span元素
   5. 选择所有class属性为box的div元素
   */
  //1. 选择id为div1的元素
  $('#div1').css('background', 'red')

  // 2. 选择所有的div元素
  // $('div').css('background', 'red')

  // 3. 选择所有class属性为box的元素
  // $('.box').css('background', 'red')

  // 4. 选择所有的div和span元素
  // $('div,span').css('background', 'red')

  // 5. 选择所有class属性为box的div元素
  // $('div.box').css('background', 'red')

  // $('*').css('background', 'red')

</script>
</body>

</html>

二.层次选择器

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>06_层次选择器</title>
</head>

<body>
<ul>
  <li>AAAAA</li>
  <li class="box">CCCCC</li>
  <li title="hello"><span>BBBBB</span></li>
  <li title="hello"><span class="box">DDDD</span></li>
  <span>EEEEE</span>
</ul>

<!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
  在给定的祖先元素下匹配所有的后代元素
2. parent>child
  在给定的父元素下匹配所有的子元素
3. prev+next
  匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
  匹配 prev 元素之后的所有 siblings 元素
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选中ul下所有的的span
   2. 选中ul下所有的子元素span
   3. 选中class为box的下一个li
   4. 选中ul下的class为box的元素后面的所有兄弟元素
   */

  //1. 选中ul下所有的的span
  $('ul span').css('background', 'yellow')

  //2. 选中ul下所有的子元素span
  // $('ul>span').css('background', 'yellow')

  //3. 选中class为box的下一个li
  // $('.box+li').css('background', 'yellow')

  //4. 选中ul下的class为box的元素后面的所有兄弟元素
  // $('ul .box~*').css('background', 'yellow')
</script>
</body>
</html>

三.过滤器选择器

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>07_过滤选择器</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>AAAAA</li>
  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two">BBBBB</li>
  <li style="display:none">我本来是隐藏的</li>
</ul>
<!--
在原有选择器匹配的元素中进一步进行过滤的选择器
  * 基本
  * 内容
  * 可见性
  * 属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   1. 选择第一个div
   2. 选择最后一个class为box的元素
   3. 选择所有class属性不为box的div
   4. 选择第二个和第三个li元素
   5. 选择内容为BBBBB的li
   6. 选择隐藏的li
   7. 选择有title属性的li元素
   8. 选择所有属性title为hello的li元素
   */
  //1. 选择第一个div
  // $('div:first').css('background', 'red')

  //2. 选择最后一个class为box的元素
  // $('.box:last').css('background', 'red')

  //3. 选择所有class属性不为box的div
  // $('div:not(.box)').css('background', 'red')  //没有class属性也可以

  //4. 选择第二个和第三个li元素
  // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
  // $('li:lt(3):gt(0)').css('background', 'red')

  //5. 选择内容为BBBBB的li
  // $('li:contains("BBBBB")').css('background', 'red')

  //6. 选择隐藏的li
  // console.log($('li:hidden').length, $('li:hidden')[0])

  //7. 选择有title属性的li元素
  // $('li[title]').css('background', 'red')

  //8. 选择所有属性title为hello的li元素
  $('li[title="hello"]').css('background', 'red')

</script>
</body>

</html>

四.表单选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>08_表单选择器</title>
</head>

<body>
<form>
  用户名: <input type="text"/><br>
  密 码: <input type="password"/><br>
  爱 好:
  <input type="checkbox" checked="checked"/>篮球
  <input type="checkbox"/>足球
  <input type="checkbox" checked="checked"/>羽毛球 <br>
  性 别:
  <input type="radio" name="sex" value='male'/>男
  <input type="radio" name="sex" value='female'/>女<br>
  邮 箱: <input type="text" name="email" disabled="disabled"/><br>
  所在地:
  <select>
    <option value="1">北京</option>
    <option value="2" selected="selected">天津</option>
    <option value="3">河北</option>
  </select><br>
  <input type="submit" value="提交"/>
</form>
<!--
表单选择器
  1). 表单
  2). 表单对象属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 选择不可用的文本输入框
   2. 显示选择爱好的个数
   3. 显示选择的城市名称
   */
  //1. 选择不可用的文本输入框
  $(':text:disabled').css('background', 'red')

  //2. 显示选择爱好 的个数
  console.log($(':checkbox:checked').length)

  //3. 显示选择的城市名称
  $(':submit').click(function () {
    var city = $('select>option:selected').html() // 选择的option的标签体文本
    city = $('select').val()  // 选择的option的value属性值
    alert(city)


  })

</script>
</body>
</html>
彭于晏爱编程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery自学第二天.docx
04-16
以上是JQuery自学第二天所涉及的主要知识点，包括JQuery与原生JavaScript的比较、冲突解决、核心函数的使用、选择器以及属性操作。通过深入理解和实践，你可以逐步掌握JQuery的精髓，提高网页开发的效率。
jQuery笔记第二天的购物车案例代码
03-01
在本篇jQuery笔记中，我们将深入探讨购物车案例的实现，这个案例主要涉及前端开发中的交互设计和数据管理。购物车是电商网站的核心功能之一，它涉及到商品的添加、删除、数量调整等操作，同时也需要实时更新总价。...
jQuery第二天笔记
weixin_44235471的博客
10-07 196
day02 - jQuery 学习目标： 能够操作 jQuery 属性 能够操作 jQuery 元素 能够操作 jQuery 元素尺寸、位置 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 语法 ​ 注意：prop() 除了普通属性操作，更适合操作表单属性：disable
jQuery第二天学习心得
Zyh499的博客
12-08 114
jQuery第二天学习心得 1.jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ; 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 // 1.获取属性语法： $('选择器').prop('属性') // 2.设置属性语法 $('选择器').prop('属性','属性值') 注意：prop() 除了普通属性操作，
jQuery第二天，笔记总结
一个前端开发者
04-27 269
jQuery笔记 地址 🔥jQuery第一天 https://blog.csdn.net/weixin_46862327/article/details/124395192 今日内容： day02 - jQuery 学习目标： 能够操作 jQuery 属性操作 (获取属性，设置属性，尺寸，位置) 能够操作 jQuery 元素 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 ...
jQuery学习第二天
凌歆的博客
03-02 1200
jQuery属性操作 1.获取或设置固有属性 2.获取和设置自定义属性 3.数据缓存 data() 直接给某个元素附加属性和属性值 4.jQuery内容文本值 1.html() 相当于innerHTML() 2.text() 相当于innerText() 5.选取所有祖先元素 parents() 6.保留两位小数 1.不是jQuery方法 2.是js的方法 7.jquery遍历方法 $((jQuery对象),function(index,ele){
jQuery原理第二天
码小余の博客
06-24 2448
jQuery原理 今天手动实现了以下方法 jQ原型上的核心方法和属性： ​ 1、jquery 获取jQ版本号 ​ 2、selector 实例默认的选择器取值 ​ 3、length 实例默认的长度 ​ 3、push 给实例添加新元素 ​ 4、sort 对实例中的元素进行排序 ​ 5、splice 按照指定下标指定数量删除元素，也可以替换删除的元素 ​ 6、toArray 把实例转换为数组返回 ​ 7、get 获取指定下标的元素，获取的是原生DOM ​ 6、
jQuery第3天笔记
qq_36699881的博客
04-20 736
jQuery第3天 目标 jQuery操作类名方法 jQuery操作标签属性方法 jQuery操作标签内容方法 jQuery动态创建元素 jQuery动态追加元素 jQuery动态删除元素 案例： 案例1：下拉菜单 案例2：手风琴轮播图 案例3：淡入淡出轮播图 一、复习和扩展 jQuery中文网站：http://jquery.cuishifeng.cn/index.html 1、jQuery操作类名 1.1 添加类名 语法：jQuery对象.addClass(‘类名’); 代码： <d
学习jquery的第二天
qq_66579387的博客
03-22 836
1.表格删除行和清空案列 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .wrap{ width: 410px; margin:100px auto 0; } .wrap tbody tr td{ border:5px solid #9ACD32; }&lt
Jquery学习笔记——第二天
破风少年
02-25 274
Jquery学习打卡Jquery学习笔记---第二天Jquery笔记 第二天1.Jquery的事件处理a)Js中事件处理的2种方式b)Jquery中通过编程式的方式加入事件处理c)注意细节i.this关键字ii.event 事件d)复合事件i.toggle()ii.hover()e)事件处理的完整写法（了解）f)特殊事件【了解】g)事件委派2.Jquery中的DOM编程a)Jquery创建新的H...
jQuery设置cookie过期时间，第二天0点过期
qq_42872259的博客
04-21 1033
需求：项目里面需要一个用户每天一进页面就显示的弹框，用户勾选知道后关闭弹框，今天之内都不在弹出，第二天用户再次进入页面，弹框还会出现。思路：首先使用cookie来记住用户的选择，设置到第二天0点失效。 步骤：1，引入在页面引入jquery.cookie.js <script type="text/javascript" src="./js/jquery.cookie.js"></script> 2,dom加载完成后执行判断有没有cookie $(function () .
学习jquery的第一天
qq_66579387的博客
03-14 1043
1.原生js
jQuery学习笔记第二天的电梯导航案例代码
03-01
本篇将详细探讨jQuery学习笔记中第二天涉及的电梯导航案例，该案例旨在实现一个网页上的楼层跳转功能，通过点击楼层链接，页面会平滑滚动到相应的位置，提升用户体验。 首先，我们要理解电梯导航的基本原理。在网页...
jQuery第四天笔记.pdf
07-04
二、 Interactions（交互组件） jQuery UI 的 Interactions 模块提供了一些交互组件，例如可拖动的元素、可调整大小的元素等。例如，Draggable Widget 允许用户使用鼠标移动元素。 Draggable Widget 的事件包括：...
第十二天，对jQuery的学习以及MySQL的安装
10-17
第十二天，对jQuery的学习以及MySQL的安装
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 821
注释很详细，直接上代码……
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 824
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
m0_74283290的博客
08-03 1239
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 704
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
精通jQuery：15天学习指南
在第二章中，主题是"比window.onload更快一些的载入"，这部分可能涉及如何使用JQuery更高效地处理页面加载事件，例如利用JQuery的$(document).ready()函数来替代传统的window.onload，以便更快地执行脚本，提高用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值