jQuery在遵循W3C规范的情况下,对event对象做了进一步封装,使得该对象在各大浏览器下都可以正常运行。...下面我们实现一个表格中的行在鼠标单击时改变背景色的示例,首先通过bind实现,参考代码如下所示。...,在该事件中主要实现动态生成行和单元格并添加到表中,同时给所有的行绑定了鼠标单击事件,用来实现背景色的改变。...添加过两个商品后,表格中一共有3行数据,第1行是原本存在的,后两行是动态创建并添加到表格上的。现在单击表格中的行,我们会发现只有第1行的背景色可以改变,后两行的背景色没有改变。...把bind换成live后,表格中的任何一行在单击时都可以改变背景色,包括动态创建的行。
用 js , jQuery 编写 ajax 的样式,三种写法,例子: //用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function...id=java"); } //获取页面上所有td元素 var tdList = document.querySelectorAll("td"); //遍历所有的 td 元素, 为他们的...id="+ src.target.title); //取消所有td元素的背景色 var tdList = document.querySelectorAll("td"); for...(var i=0;i 单击的单元格设置背景色 src.target.style.background...= history.state["cellTitle"]; var tdList = document.querySelectorAll("td"); //取消所有单元格的背景色,只设置被选中的单元格的背景色
,我们在本示例中添加了一个9行2列的表格,然后使用各种过滤选择器获取表格中的行。...jQuery提供了诸多功能强大的选择器,包括层次选择器、属性选择器、表单选择器、内容选择器等,内容比较多,大家在使用的时候要注意每种选择器的语法以及它们的适用场合。 ...任务实训部分 1:实现树形菜单 训练技能点 jQuery层次选择器 需求说明 在示例4.1的基础上使用jQuery层次选择器实现树形菜单的收缩/展开特效。..."#all").get(0).checked; } ) } 4:表格隔行加背景色 训练技能点 jQuery过滤选择器 需求说明 按照图界面,使用jQuery过滤选择器实现表格隔行背景变色的效果...实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。
,我们在本示例中添加了一个9行2列的表格,然后使用各种过滤选择器获取表格中的行。...jQuery提供了诸多功能强大的选择器,包括层次选择器、属性选择器、表单选择器、内容选择器等,内容比较多,大家在使用的时候要注意每种选择器的语法以及它们的适用场合。...任务实训部分 1:实现树形菜单 训练技能点 jQuery层次选择器 需求说明 在示例4.1的基础上使用jQuery层次选择器实现树形菜单的收缩/展开特效。...").get(0).checked; } ) } 4:表格隔行加背景色 训练技能点 jQuery过滤选择器 需求说明 按照图界面,使用jQuery过滤选择器实现表格隔行背景变色的效果...实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。
, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式,对页面中元素进行选择...这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。...在动画完成时执行的函数 fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。...在动画完成时执行的函数 ④:内容过滤选择器 内容选择器是对子元素和文本内容的操作 :contains(text) 选取包含text文本内容的元素 $("div:contains...下3的倍数行,字体颜色为红色 ² 表格 奇数行 背景色 黄色 ² 表格 偶数行 背景色 灰色 ² 只有一个td的 tr元素 字体为 蓝色 <scripttype="text/javascript"src
隔行换色是一种简单却十分实用的设计手法,它通过改变表格、列表等元素的背景色,使页面看起来更加清晰有序。 在 JQuery 的世界中,实现隔行换色是一项非常简单而有效的任务。...JQuery 隔行换色实现原理 隔行换色的实现原理很简单,即通过 JQuery 为目标元素添加或移除特定的样式,使得相邻行具有不同的背景色。...以下是一些实际应用场景: 博客文章内容 在博客网站中,通过隔行换色可以使文章内容更易读,区分不同的段落或列表项。...JQuery 隔行换色时,有一些小贴士值得注意: 灵活运用选择器 JQuery 的选择器是非常灵活的,可以根据实际情况选择不同的元素。...希望通过这篇博客,你对 JQuery 隔行换色有了更深入的理解,并能够在实际项目中灵活运用这一设计技巧。让我们一同在前端的世界中,创造出更为优雅、美观的用户界面!
隔行换色是一种简单却十分实用的设计手法,它通过改变表格、列表等元素的背景色,使页面看起来更加清晰有序。在 JQuery 的世界中,实现隔行换色是一项非常简单而有效的任务。...JQuery 隔行换色实现原理隔行换色的实现原理很简单,即通过 JQuery 为目标元素添加或移除特定的样式,使得相邻行具有不同的背景色。...以下是一些实际应用场景:博客文章内容在博客网站中,通过隔行换色可以使文章内容更易读,区分不同的段落或列表项。...JQuery 隔行换色时,有一些小贴士值得注意:灵活运用选择器JQuery 的选择器是非常灵活的,可以根据实际情况选择不同的元素。...希望通过这篇博客,你对 JQuery 隔行换色有了更深入的理解,并能够在实际项目中灵活运用这一设计技巧。让我们一同在前端的世界中,创造出更为优雅、美观的用户界面!
核心技能部分 6.1 jQuery属性操作 每个标签都有各种各样的属性,因此属性操作在日常开发中非常频繁。jQuery提供了现成的一些函数来简化属性操作,详见表6-1-1所示。...我们同样也可以使用jQuery中的attr函数对可简写的属性进行操作,但是在使用attr函数对可简写的属性进行设置操作时没有问题,进行取值操作时会出现问题,例如下面的代码。...在document准备就绪前,这个值是null。 leadingWhitespace 检测在使用innerHTML的时候浏览器是否会保持前导空白字符,目前在IE 6—8中返回false。...trim函数去除两端的空格,然后使用parseJSON函数把字符串转换成了JSON对象,最后就可以通过对象的属性来获取信息了 本章学习的内容分为四部分:属性操作、样式操作、工具函数和字符串操作。...、上机练习 我们在第一章学习过JSON,现在请使用jQuery中的parseJSON函数把一个自定义的字符串解析为JSON对象并输出。
核心技能部分 6.1 jQuery属性操作 每个标签都有各种各样的属性,因此属性操作在日常开发中非常频繁。jQuery提供了现成的一些函数来简化属性操作,详见表6-1-1所示。...我们同样也可以使用jQuery中的attr函数对可简写的属性进行操作,但是在使用attr函数对可简写的属性进行设置操作时没有问题,进行取值操作时会出现问题,例如下面的代码。...在document准备就绪前,这个值是null。 leadingWhitespace 检测在使用innerHTML的时候浏览器是否会保持前导空白字符,目前在IE 6—8中返回false。...trim函数去除两端的空格,然后使用parseJSON函数把字符串转换成了JSON对象,最后就可以通过对象的属性来获取信息了 本章学习的内容分为四部分:属性操作、样式操作、工具函数和字符串操作。...、上机练习 我们在第一章学习过JSON,现在请使用jQuery中的parseJSON函数把一个自定义的字符串解析为JSON对象并输出。
jQuery的插件开发" class="item">基于jQuery的插件开发 td>2. NBA 2011季后赛td> td>3....) 下面的代码,更改边框或背景色仅在IE下有效果,chrome和firefox不会改变,但是alert都会弹出来。
1、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。...,既可以将一个上下文参数传入jQuery,以限制它只搜索DOM中特定的一部分。... td>我是单元格td> 比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子.../td>'); $t.append(''); //建议 $('body').append('td>1td>'); 这样在拼接完...隐藏一个元素或者改变一个元素的背景色时都将导致一次重绘。 当对页面结构进行更新时,将导致页面重布局。
id选择器(指定id元素) 将 id="divOne" 的元素背景色设置为红色。...(id选择器返单个元素) $('#divOne').css('background', 'red'); class选择器(遍历css类元素) 将 class="divTwo" 的元素背景色设为蓝色 $(...,序列1和序列2所在的li会有边框 <!...) 将有 title 元素的span设置背景色为篮色 $('span[title]').css('background','blue'); [attribute = value]和[attribute...='test3' 元素的span设置背景色为红色 <!
需求说明: 在页面中有一个图片和一个关闭按钮 当滚动条向下或向右移动时,图片和关闭按钮随滚动条移动,相对于浏览器的位置固定 单击“关闭”按钮时,页面中的图片和关闭按钮不显示 <script...选择器 上机练习1 制作图书简介页面 需求说明: 根据提供的素材,在图书简介页面上增加jQuery代码,使用基本选择器和层次选择器,获取并设置页面元素 “自营图书几十万”……一行字体颜色为红色 京东价...; }) 上机练习4 制作隔行变色的商品列表 需求说明: 根据提供的素材,添加jQuery代码,完成效果制作,隔行变色(不包括表头)偶数行背景色为#eff7d1,奇数行背景色为...,单击“发送”按钮,在页面上显示聊天内容,左侧显示聊天者头像,右侧显示聊天昵称和聊天信息,使用assClass()方法为聊天内容添加背景色,边框为圆角,聊天内容发送完毕后,内容显示在聊天区域,输入框内容清空...,选择所属板块,输入帖子内容 单击“发布”按钮,新发布的帖子显示在列表的第一个,新帖子显示头像,标题,板块和发帖时间 关键代码:
7.1.2 插入节点 在实际开发中,有些节点需要动态的插入到页面中,这时可以通过jQuery提供好的一些函数来实现,详见表7-1-1所示。...简介 jQuery是创建于2006年1月的开源项目,主要包括核心库、UI和插件三部分。...jQuery针对节点操作提供了很多函数供开发人员使用,这些函数很多比较相似,大家在使用的时候要注意区分。 ...添加节点时,需要先单击选中某个一级或二级节点,然后在文本框中填写新添加的节点名,单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。
7.1.2 插入节点 在实际开发中,有些节点需要动态的插入到页面中,这时可以通过jQuery提供好的一些函数来实现,详见表7-1-1所示。...简介jQuery是创建于2006年1月的开源项目,主要包括核心库、UI和插件三部分。...jQuery针对节点操作提供了很多函数供开发人员使用,这些函数很多比较相似,大家在使用的时候要注意区分。...添加节点时,需要先单击选中某个一级或二级节点,然后在文本框中填写新添加的节点名,单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。
, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式,对页面中元素进行选择...") :animated 匹配所有正在执行动画效果的元素 练习3: ² 设置表格第一行,显示为红色 ² 设置表格除第一行以外 显示为蓝色 ² 设置表格奇数行背景色 黄色 ² 设置表格偶数行背景色 绿色...这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。...奇数行 背景色 黄色 ² 表格 偶数行 背景色 灰色 ² 只有一个td的 tr元素 字体为 蓝色 的传递,采用GET方式传递,否则采用POST方式 练习一:校验用户名是否存在 此练习在第五章的第三小节有实现代码,这里使用jQuery的方式进行简要的列出核心代码: $(function(
在 GET 方法中修改数据还违反了 HTTP 的最佳做法和Rest架构模式, GET 请求不应更改应用程序的状态。...有关延迟的查询执行的详细信息,请参阅Query Execution. 现在,您可以实现SearchIndex视图并将其显示给用户。在SearchIndex方法内单击右键,然后单击添加视图。...在添加视图对话框中,指定你要将Movie对象传递给视图模板作为其模型类。在框架模板列表中,选择列表,然后单击添加....显示已筛选的电影。 如果您更改SearchIndex方法的签名,改为参数id,在Global.asax文件中设置的默认路由将使得: id参数将匹配{id}占位符。...Html.BeginForm Helper将使得, 在用户通过单击筛选按钮提交窗体时,窗体Post本Url。运行该应用程序,请尝试搜索一部电影。
tr: odd”) 匹配集合中奇数位置的所有元素(从0开始) $(”td: eq(2)”) 匹配集合中指定位置的元素(从0开始) $(”td: gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始...如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。...,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。...= ['#f00', '#0f0', '#00f'][i] }) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件: (1)hover(fn1, fn2):一个模仿悬停事件...如:$.merge([0, 1, 2], [2, 3, 4]) //返回[0,1,2,3,4] $.trim(str):删除字符串两端的空白字符。