install jquery 2.入口函数介绍 2.1window.onload事件的问题 在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口，时机并不好。...这里简单说一点： jQuery包装对象本身是一个伪数组，选择器返回的所有的DOM元素都会存在jQuery的包装对象中，并且还有很多其他的jQuery特有的api。...，那么返回第一个元素的内部文本 console.log($div.text());// jQuery获取选择元素的内部文本。...互斥选择案例 用户名 年龄 联系 ... $(function(){ // jQuery可以通过 原型上的click方法进行绑定点击事件。
这里简单说一点： jQuery包装对象本身是一个伪数组，选择器返回的所有的DOM元素都会存在jQuery的包装对象中，并且还有很多其他的jQuery特有的api。...// 但是获取值，只会返回第一个元素的值。...，那么返回第一个元素的内部文本 console.log($div.text());// jQuery获取选择元素的内部文本。...互斥选择案例 用户名 年龄 联系 ... $(function(){ // jQuery可以通过 原型上的click方法进行绑定点击事件。
/tr> jQuery代码 $("tr:odd") 结果 [Value 1] :eq(index) //概述 //匹配一个给定的索引值的元素... Value 1 Value 2 jquery...,而次选择符将为 每个父元素匹配一个子元素· 描述 在每一个ul中查找第一个li HTML代码 John Karl ... jQuery代码： $("img").removeAttr("src") 结果 [] prop //概述 //获取在匹配的元素集合中的第一个元素的属性值...html内容·和个函数 不能用XML文档·但可以用于XHTML文档· //在一个HTML文档中,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素的
隔行换色是一种简单却十分实用的设计手法，它通过改变表格、列表等元素的背景色，使页面看起来更加清晰有序。 在 JQuery 的世界中，实现隔行换色是一项非常简单而有效的任务。...JQuery 隔行换色实现原理 隔行换色的实现原理很简单，即通过 JQuery 为目标元素添加或移除特定的样式，使得相邻行具有不同的背景色。...> bob@example.com 在这个示例中，我们为表格的行定义了两种不同的样式...比如，可以使用:first-child选择器选择每个父元素的第一个子元素，实现特殊样式。...希望通过这篇博客，你对 JQuery 隔行换色有了更深入的理解，并能够在实际项目中灵活运用这一设计技巧。让我们一同在前端的世界中，创造出更为优雅、美观的用户界面！
隔行换色是一种简单却十分实用的设计手法，它通过改变表格、列表等元素的背景色，使页面看起来更加清晰有序。在 JQuery 的世界中，实现隔行换色是一项非常简单而有效的任务。...JQuery 隔行换色实现原理隔行换色的实现原理很简单，即通过 JQuery 为目标元素添加或移除特定的样式，使得相邻行具有不同的背景色。...@example.com 在这个示例中，我们为表格的行定义了两种不同的样式，分别为奇数行和偶数行。...比如，可以使用:first-child选择器选择每个父元素的第一个子元素，实现特殊样式。...希望通过这篇博客，你对 JQuery 隔行换色有了更深入的理解，并能够在实际项目中灵活运用这一设计技巧。让我们一同在前端的世界中，创造出更为优雅、美观的用户界面！
>2 $("tr:even") [ 0, 2 ] 匹配所有索引值为奇数的元素 匹配所有索引值为奇数的元素...1 ] 匹配一个给定索引值的元素 0 1 2 $("tr:eq(1)") [ 1 ] 匹配所有大于给定索引值的元素 0... ] 匹配所有小于给定索引值的元素 0 1 2...:first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配
td>Value 1 Value 2 jQuery 代码: $(“td:parent...[attribute] 匹配包括给定属性的元素。注意，在jQuery 1.3中。前导的@符号已经被废除！假设想要兼容最新版本号，仅仅须要简单去掉@符号就可以。...tr> Value 2 jQuery 代码: $(“tr:hidden”) 结果: [ Value 2 jQuery 代码: $(“tr:visible”) 结果: [ Value...而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找第一个 li HTML 代码: John Karl
, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式，对页面中元素进行选择...③：基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配的元素 $("...这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。...在动画完成时执行的函数 ④：内容过滤选择器 内容选择器是对子元素和文本内容的操作 :contains(text) 选取包含text文本内容的元素 $("div:contains...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素，它的父元素只有它这一个子元素 练习7： ² 选择id属性mytable
table1" id="table1" class="table1"> <td name="td11" id...DOM对象的属性方法如.length，但也有个别属性方法不能使用如.value，可以通过在JQuery包装集后面加中括号及索引值获取对应DOM对象 var text11_dom=$("#text11")...在所有tr标签中查找id为text11元素的JQuery包装集 var text11_query=$("#text11","tr"); ===================jQuery选择器====..."); 5.选择所有DOM元素 var all_query=$("*"); 2.层次选择器 Hierarchy 1.从所有tr标签中获取其下面的所有id值为text11的元素 var text11_query...input元素，第一个input元素算一 var input_query=$("input:nth-child(2)"); 2.查找所有在父元素中的所有子元素中排第一的input元素 var input_query
2、 查找元素 jQuery里有：选择器、筛选器 关于jQuery的版本 关于jQuery的版本：(现在一共有三大版本) 1系列版本 2系列版本 3系列版本 三者的区别是：1系列兼容ie的各个版本...这样就找到了c1所在div中的所有的a标签 2、$(".c1>a")查找儿子标签 ?...基本筛选器 查找多个标签中的第一个,通过：first zzz bbb qqq 查找c1下面的第一个...> 80 <script src="<em>jquery</em>-1.12.4...$(..).prop 专门用于checkbox，radio做操作 <em>在</em>3版本一下<em>的</em><em>jQuery</em><em>中</em>存在一个问题，效果如下： ? 当设置为选中后<em>在</em>取消： ? 所以这里通过prop实现： ?
这个效果相信大家在很多地方见到过，我这里运用了Jquery和HTML DOM两种方法结合。这就是我要说的一个重点。 ...我们看Jquery代码：$(".hovertable td").mouseover，选择了class=hovertable的元素的td子元素，为他的mouseover事件绑定一个函数。...大家可以看到，我用到的就是target属性，event.target指的就是触发mouseover事件的DOM元素，在这里就是td。 所以在函数中，我们得到了鼠标所在的元素。...在这里，我来说一下我们获得的这个DOM对象。 在Jquery中，有对html操作的一些函数，比如$(xx).html()，获取某元素内的内容。...大家可以看到，children("td:first")，就是取第一个td元素。也就是这一行的第一个格子，再用html()取到其内容，保存到变量name里。
>24 $('tr:odd').css('background', 'red'); 需求描述：实现让表格的第一行的背景变为红色 24 $('tr:first').css('background', 'red'); 需求描述：实现让表格的最后一行的背景变为红色 console.log($(':text').val()); # 3.1.2 样式 # 1. css() 方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个...() 方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。...主要的不同是语法，特别是插入内容和目标的位置。 对于 .after ()，选择表达式在函数的前面，参数是将要插入的内容。
: 子代选择器常用于缩小查询范围,在匹配的父元素下,选择所有匹配的子元素....,通过选择不同表格读取表格中的数据....表格 // 在table中找input下类型为checkbox属性为选中状态的数据 var check = $("table input[type=checkbox... 表格行号的提取: 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据....> 表格行号的提取(2): 通过使用Jquery提取出指定表格中,指定行号,以及标签中的数据.
文章目录 jQuery概念 快速入门 步骤： JQuery对象和JS对象区别与转换 选择器：筛选具有相似特征的元素(标签) 基本操作学习 事件绑定 入口函数 样式控制：css方法 分类 基本选择器...’]”) 包含指定属性等于指定值的选择器 复合属性选择器 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器 过滤选择器 首元素选择器 语法： :first 获得选择的元素中的第一个元素...尾元素选择器 语法： :last 获得选择的元素中的最后一个元素 非元素选择器 语法： :not(selector) 不包括指定内容的元素 偶数选择器 语法： :even 偶数，从 0 开始计数 奇数选择器.../js/jquery-3.3.1.min.js"> //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可 function...家居饰品 家居饰品类商品 修改|删除 </table
/js/jquery-3.3.1.min.js"> //需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow $(function...2 实现全选全不选 【需求】：点击第二行的checkbox，需要保证下边的选中状态和第一个复选框的选中状态一致即可 【代码实现】： //分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可 function...家长 修改|删除 ...3 QQ表情选择 【需求】：点击qq表情，将其追加到发言框中 【代码实现】：注意clone方法的使用 <!
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。...写更少的代码,做更多的事情: write Less ,Do more 将我们页面的JS代码和HTML页面代码进行分离 提高我们的工作效率,轻松的进行前端开发 JQuery中的选择器： 基本选择器 ID选择器...’] : 多个属性,包含值 基本过滤器: 选择器:first 找出的是第一个 :last :even 找出索引为偶数 :odd 找出奇数索引 :gt(index) 大于索引 :... $(function(){ $("#Demo").click(function(){ $(...使用JQ完成省市联动效果 需求分析: 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析: 准备工作 : 城市信息的数据 添加节点
=xxx的div ###子元素选择器 $(“div:first-child”) 匹配是div并且是第一个而且要求元素是子元素 $(“div:last-child”) 匹配是div并且是最后一个而且要求元素是子元素...$(“div:nth-child(n)”) 匹配是div并且是第n个而且要求元素是子元素 n从1 开始 ###表单选择器 $(":input") 匹配所有表单中的控件 $(":password") 匹配所有密码框...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul..."> //给按钮添加点击事件 $("input:last").click(function(){ //在点击事件里面创建一个tr和五个td //5个td分别是nametd agetd...; tr.append(deltd); //把tr添加到table里面 $("table").append(tr); }) //把创建出来的td添加到tr里面把tr添加到
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。...写更少的代码,做更多的事情: write Less ,Do more 将我们页面的JS代码和HTML页面代码进行分离 提高我们的工作效率,轻松的进行前端开发 JQuery中的选择器： 基本选择器 ID选择器...=’test’] : 多个属性,包含值 基本过滤器: 选择器:first 找出的是第一个 :last :even 找出索引为偶数 :odd 找出奇数索引... $(function(){ $("#Demo").click(function(){ $(...使用JQ完成省市联动效果 需求分析: 在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市 技术分析: 准备工作 : 城市信息的数据 添加节点
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery... A B C D ——1.4...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...NBA 2007季后赛 例3（html代码和例2是一样的）： ?
<table width="200" cellpadding="0" cellspacing="0"> A B C D ——1.4 :eq(x) （取指定索引的元素） ?...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...; }); 1....NBA 2007季后赛 例3（html代码和例2是一样的）： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
