- 浏览: 85564 次
文章分类
最新评论
1、封装js函数
2、浏览器兼容
3、css样式
4、增加脚本健壮
1、对象选择器
css juery
元素名 div $('div') 获取所有 div 元素的 DOM 对象
id #box $('#box') 获取一个 ID 为 box 元素的 DOM 对象
类(class) .box $('.box') 获取所有 class 为 box 的所有 DOM 对象
群组选择器 span,em, $('span,em,.box') 获取多个选择器的 DOM 对象
后代选择器 ul li a $('ul li a') 获取追溯到的多个 DOM 对象
子选择器 div > p {} $('div p') 只获取子类节点的多个 DOM 对象
通配选择器 * $('*') 获取所有元素标签的 DOM 对象
next 选择器 div + p {} $('div + p') 只获取某节点后一个同级 DOM对象
nextAll div ~ p {} $('div ~ p') 获取某节点后面所有同级 DOM对象
jQuery 为后代选择器提供了一个等价 find()方法
$('#box').find('p').css('color', 'red'); //和后代选择器等价
jQuery 为子选择器提供了一个等价 children()方法:
$('#box').children('p').css('color', 'red'); //和子选择器等价
jQuery 为 next 选择器提供了一个等价的方法 next():
$('#box').next('p').css('color', 'red'); //和 next 选择器等价
jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll():
$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价
在 find()、 next()、 nextAll()和 children()这四个方法中, 如果不传递参数, 就相当于传递了“*”;
$('#box').prev('p').css('color', 'red'); //同级上一个元素
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
$('#box').parent() //父元素或节点
var demo = $('div').get(0);
var demoLength = $('div').size();
demoLength = $('div').length;
juery不存在的id不报错,js要报错
if(document.getElementById('pox')) { |if($('#pox').length > 0) 或if($('#pox').get(0)) 或 if($('#pox')[0])
2、属性选择器
css jquery
a[title] $('a[title]') 获取具有这个属性的 DOM 对象
a[title=num1] $('a[title=num1]')获取具有这个属性=这个属性值的 DOM 对象
a[title^=num] $('a[title^=num]')获取具有这个属性且开头属性值匹配的DOM 对象
a[title|=num] $('a[title|=num]')获取具有这个属性且等于属性值或开头属
性值匹配后面跟一个“-” 号的 DOM 对象
a[title$=num] $('a[title$=num]')获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num] $('a[title!=num]')获取具有这个属性且不等于属性值 的DOM 对象
a[title~=num] $('a[title~=num]')获取具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的 DOM 对象
a[title*=num] $('a[title*=num]')获取具有这个属性且属性值含有一个指定字串的 DOM 对象
a[bbb][title=num1] $('a[bbb][title=num1]')获取具有这个属性且属性值匹配的 DOM对象
3、过滤选择器
$('li:first') 选取第一个元素 单个元素
$('li:last') 选取最后一个元素 单个元素
$('li:not(.red)') 选取 class 不是 red 的 li 元素 集合元素
$('li.even') 选择索引(0 开始)是偶数的所有元素 集合元素
$('li:odd') 选择索引(0 开始)是奇数的所有元素 集合元素
$('li:eq(2)') 选择索引(0 开始)等于 index 的元素 单个元素
$('li:gt(2)') 选择索引(0 开始)大于 index 的元素 集合元素
$('li.lt(2)') 选择索引(0 开始)小于 index 的元素 集合元素
$(':header') 选择标题元素, h1 ~ h6 集合元素
$(':animated') 选择正在执行动画的元素 集合元素
$(':focus') 选择当前被焦点的元素 集合元素
$('#box li:last') == $('#box li).last()
4、内容过滤选择器
$('div:contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
$('div:empty') 选取不包含子元素或空文本的元素 元素集合
$('ul:has(.red)') 选取含有 class 是 red 的元素 元素集合
$(':parent') 选取含有子元素或文本的元素,选择非空元素 元素集合
5、可见性过滤器
$('p:hidden).size(); //元素 p 隐藏的元素
$('p:visible').size(); //元素 p 显示的元素
hidden 过滤器一般是包含的内容为: CSS 样式为 display:none、 input 表单类型为
type="hidden"和 visibility:hidden 的元素。
对象的值:
html() 获取元素中 HTML 内容
html(value) 设置元素中 HTML 内容
text() 获取元素中文本内容
text(value) 设置原生中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容
追加html:
$('#box').html($('#box').html() + '<em>www.li.cc</em>');
$('div').html(function (index, value) {});
属性操作 attr
attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置
$('div').removeAttr('title'); //删除指定的属性
元素样式操作
css(name) 获取某个元素行内的 CSS 样式
css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式
css(name, value) 设置某个元素行内的 CSS 样式
css(name, function (index, value) ) 设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式
addClass(class) 给某个元素添加一个 CSS 类
addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类
removeClass(class) 删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类
toggleClass(class) 来回切换默认样式和指定样式
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
jQuery 提供了一个遍历工具专门来处理这种对象数组, $.each()方法
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
});
$('div').click(function () { //当点击后触发
$(this).toggleClass('red size'); //单个样式多个样式均可
});
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0); //增加了频率
});
CSS 方法
width() 获取某个元素的长度
width(value) 设置某个元素的长度
width(function (index, width) {}) 通过匿名函数设置某个元素的长度
height() 获取某个元素的长度
height(value) 设置某个元素的长度
height(function (index, width) {}) 通过匿名函数设置某个元素的长度
$5章
2、浏览器兼容
3、css样式
4、增加脚本健壮
1、对象选择器
css juery
元素名 div $('div') 获取所有 div 元素的 DOM 对象
id #box $('#box') 获取一个 ID 为 box 元素的 DOM 对象
类(class) .box $('.box') 获取所有 class 为 box 的所有 DOM 对象
群组选择器 span,em, $('span,em,.box') 获取多个选择器的 DOM 对象
后代选择器 ul li a $('ul li a') 获取追溯到的多个 DOM 对象
子选择器 div > p {} $('div p') 只获取子类节点的多个 DOM 对象
通配选择器 * $('*') 获取所有元素标签的 DOM 对象
next 选择器 div + p {} $('div + p') 只获取某节点后一个同级 DOM对象
nextAll div ~ p {} $('div ~ p') 获取某节点后面所有同级 DOM对象
jQuery 为后代选择器提供了一个等价 find()方法
$('#box').find('p').css('color', 'red'); //和后代选择器等价
jQuery 为子选择器提供了一个等价 children()方法:
$('#box').children('p').css('color', 'red'); //和子选择器等价
jQuery 为 next 选择器提供了一个等价的方法 next():
$('#box').next('p').css('color', 'red'); //和 next 选择器等价
jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll():
$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价
在 find()、 next()、 nextAll()和 children()这四个方法中, 如果不传递参数, 就相当于传递了“*”;
$('#box').prev('p').css('color', 'red'); //同级上一个元素
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
$('#box').parent() //父元素或节点
var demo = $('div').get(0);
var demoLength = $('div').size();
demoLength = $('div').length;
juery不存在的id不报错,js要报错
if(document.getElementById('pox')) { |if($('#pox').length > 0) 或if($('#pox').get(0)) 或 if($('#pox')[0])
2、属性选择器
css jquery
a[title] $('a[title]') 获取具有这个属性的 DOM 对象
a[title=num1] $('a[title=num1]')获取具有这个属性=这个属性值的 DOM 对象
a[title^=num] $('a[title^=num]')获取具有这个属性且开头属性值匹配的DOM 对象
a[title|=num] $('a[title|=num]')获取具有这个属性且等于属性值或开头属
性值匹配后面跟一个“-” 号的 DOM 对象
a[title$=num] $('a[title$=num]')获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num] $('a[title!=num]')获取具有这个属性且不等于属性值 的DOM 对象
a[title~=num] $('a[title~=num]')获取具有这个属性且属性值是以一个空格分割的列表,其中包含属性值的 DOM 对象
a[title*=num] $('a[title*=num]')获取具有这个属性且属性值含有一个指定字串的 DOM 对象
a[bbb][title=num1] $('a[bbb][title=num1]')获取具有这个属性且属性值匹配的 DOM对象
3、过滤选择器
$('li:first') 选取第一个元素 单个元素
$('li:last') 选取最后一个元素 单个元素
$('li:not(.red)') 选取 class 不是 red 的 li 元素 集合元素
$('li.even') 选择索引(0 开始)是偶数的所有元素 集合元素
$('li:odd') 选择索引(0 开始)是奇数的所有元素 集合元素
$('li:eq(2)') 选择索引(0 开始)等于 index 的元素 单个元素
$('li:gt(2)') 选择索引(0 开始)大于 index 的元素 集合元素
$('li.lt(2)') 选择索引(0 开始)小于 index 的元素 集合元素
$(':header') 选择标题元素, h1 ~ h6 集合元素
$(':animated') 选择正在执行动画的元素 集合元素
$(':focus') 选择当前被焦点的元素 集合元素
$('#box li:last') == $('#box li).last()
4、内容过滤选择器
$('div:contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
$('div:empty') 选取不包含子元素或空文本的元素 元素集合
$('ul:has(.red)') 选取含有 class 是 red 的元素 元素集合
$(':parent') 选取含有子元素或文本的元素,选择非空元素 元素集合
5、可见性过滤器
$('p:hidden).size(); //元素 p 隐藏的元素
$('p:visible').size(); //元素 p 显示的元素
hidden 过滤器一般是包含的内容为: CSS 样式为 display:none、 input 表单类型为
type="hidden"和 visibility:hidden 的元素。
对象的值:
html() 获取元素中 HTML 内容
html(value) 设置元素中 HTML 内容
text() 获取元素中文本内容
text(value) 设置原生中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容
追加html:
$('#box').html($('#box').html() + '<em>www.li.cc</em>');
$('div').html(function (index, value) {});
属性操作 attr
attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置
$('div').removeAttr('title'); //删除指定的属性
元素样式操作
css(name) 获取某个元素行内的 CSS 样式
css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式
css(name, value) 设置某个元素行内的 CSS 样式
css(name, function (index, value) ) 设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式
addClass(class) 给某个元素添加一个 CSS 类
addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类
removeClass(class) 删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类
toggleClass(class) 来回切换默认样式和指定样式
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
jQuery 提供了一个遍历工具专门来处理这种对象数组, $.each()方法
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
});
$('div').click(function () { //当点击后触发
$(this).toggleClass('red size'); //单个样式多个样式均可
});
var count = 0;
$('div').click(function () {
$(this).toggleClass(function () {
return $(this).hasClass('red') ? 'blue' : 'red size';
},count++ % 3 == 0); //增加了频率
});
CSS 方法
width() 获取某个元素的长度
width(value) 设置某个元素的长度
width(function (index, width) {}) 通过匿名函数设置某个元素的长度
height() 获取某个元素的长度
height(value) 设置某个元素的长度
height(function (index, width) {}) 通过匿名函数设置某个元素的长度
$5章
发表评论
-
###spring事务
2015-04-15 11:22 0Spring声明式事务让我们从复杂的事务处理中得到解脱 ... -
1、架构师之路
2015-03-11 13:56 0http://developer.51cto.com/deve ... -
精华帖
2015-03-11 11:10 373http://www.iteye.com/magazines/ ... -
2、mongodb运用
2015-03-10 11:46 453进入db:mongodb/ ./bin/mongo loca ... -
3、VMware虚拟机共享文件夹的使用
2015-03-10 09:40 7981、安装vmware tools 先启动一个linux系统 h ... -
1.nosql-MongoDB(linux安装)
2015-03-10 11:39 340NoSQL,泛指非关系型的数据库。随着互联网web2.0网 ... -
llll、activti-spring
2015-03-04 07:36 555这里使用的是5.12版本 将activiti-explorer ... -
5、juery 表单选择器
2015-03-03 21:52 443表单选择器 $('input').val(); //元素名定位 ... -
3、javascript(3)
2015-03-03 21:51 496@@@@@@@@@@@@@@@@@@@ -
2、javascript(2)
2015-03-03 21:51 417对象和事件是JavaScript的两个核心。 JavaScr ... -
1、javascript(1)
2015-03-03 21:51 413link:http://wenku.baidu.com/vie ... -
2、操作系统
2015-03-04 19:45 425kernel是掌管一台pc硬件的程序,核心程序放置在内存当中且 ... -
1、计算机概论
2015-03-04 19:45 486计算机其实就是:『接受用户输入指令与数据, 经由中央处理器的数 ... -
7、多线程
2015-03-01 08:19 23在项目中使用多线程的场景并不是很多,我想是一般项目对线程 ... -
1、oracle-游标cursor、存储过程
2015-03-01 08:18 462静态游标和REF游标,静态游标分为:显示游标/隐式游标 显示 ...
相关推荐
1:教程概述 2:配置站点 3:jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:...
jQuery第1天:JQ基本介绍、使用步骤、jQuery对象与DOM对象(重点)、jQuery选择器、mouseover与mouseenter、index方法、区分jQuery与Javascript
jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回。 注意: 选择器next的查找范围必须是与”prev元素”相邻的下一个元素,并且必须是”prev元素”的同辈元素。 语法...
使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector)。但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector)[removed]以获取元素内部HTML代码是错误的,正确写法是$...
层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...
有时尤其是在初学jQuery,无法记住jQuery的所有函数时,会有很长一段时间使用jQuery选择器配合原始的dom函数进行开发。所以两种对象的转化是很有必要的。 jQuery对象的索引保存的是dom对象,所以可以通过索引将经...
7. jQuery对象和DOM对象 3 第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. ...
4. 层次选择器 5. 基本过滤选择器 6. 内容过滤选择器 7. 可见性过滤选择器 8. 属性过滤选择器 9. 子元素过滤选择器 10. 表单元素过滤选择器 11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类...
按照过滤规则的不同,我们通常把jQuery过滤选择器分为:基本过滤、属性过滤、内容过滤、子元素过滤、表单对象属性过滤、可见性过滤等。今天我们主要学习一下其中的“基本过滤选择器”。 一、:first 选
jQuery 3.1 标准课程第二章 选择器表单对象属性选择器
根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") ,jquery 对象选择器是jquery的一个亮点。
控制jQuery对象 jQuery控制CSS样式 第2章 使用JavaScript实现隔行变色 使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用...
jQuery 选择器大体上可分为 4 类:基本选择器、层次选择器、过滤选择器、表单选择器。 其中过滤选择器可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象...
1.4.1 DOM对象和jQuery对象简介 1.4.2 jQurey对象和DOM对象的相互转换 1.4.3 实例研究 1.5 解决jQuery和其他库的冲突 1.6 jQuery开发工具和插件 1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择...
无须判断对象是否存在其中“$”是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$(“#foo”)和jQuery(“#foo”)是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,可以把程序中的$...
其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 –> <title>使用jQuery基本过滤选择器</title> &...
本文实例讲述了jQuery表单对象属性过滤选择器。分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11<...
主要介绍了jquery选择器和属性对象的操作,结合实例形式分析了jquery选择器与页面元素属性相关操作技巧,需要的朋友可以参考下
目录 一.JQuery了解 1,原生js的问题 2. JQuery简单介绍 2.1 官方自我介绍: ...三.$()选择器 1.$()选择的结果是一个类数组 2.使用方法(引号问题) 3.文档加载 3.1 [removed]()函数和$(document).re
第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery...