- 浏览: 85847 次
文章分类
最新评论
1、table 选择
2、表单选择
3、class选择
4、子节点选择
5、父节点选择
6、同级选择器
7、包含选择器
8、属性过滤器
9、节点操作 内容/值/属性/样式
一、table行列选择
1、定位选择
//多张table用0,1,2区分,后面可以是html();
$("table:eq(0) tr:eq(0) td:eq(0)").text();
1.1、列(行)选择:
二、表单选择
1、input type选择
1.1 type = "text"
//为0可以不写
$("input[type=text]:eq(1)").val()
1.2 type ="checkbox"(name)
三、类选择器
四、子节点选择
1、选取所有直接子节点 使用>
$("#son > p").css('background','green');
1.1、选取特定的直接子节点(:first,last)
$("#son > p:eq(2)").css('background','green');
$("#son > p:last").css('background','green');
1.2、直接子节点的奇偶选择
$("#son > p:even").css('background','green');
$("#son > p:odd").css('background','yellow');
1.3、大于|小于选择
$("#son > p:gt(2)").css('background','green');
$("#son > p:lt(2)").css('background','yellow');
2、使用空格选择子节点(有时候使用>不能获取子节点)
$("table:eq(0) tr:eq(1)").css('background','green');
$("table:eq(0) tr:eq(1) td:eq(2)").css('background','yellow');
$("#son p:eq(1) a").css('background','yellow');
3、使用find("p")方法
$("#item1").closest("ul").find("li:eq(2)").html();
4、使用children(exp)方法(使用较少,不介绍)
五、父节点选择
1、使用parent()
$("#item1").parent().html()
1.1、使用parent(exp)
$("#item1").parent().parent("ul").html()
1.3、使用parents(exp)(不常用:要查找所有exp直到html节点)
$("#item1").parents("ul").html()
2、使用closest(从当前元素开始匹配寻找,发现匹配的元素后停止)
$("#item1").closest("ul").html()
六、同级选择
1、返回下一个next();
$("#item1").parent().next().html();
//,如果下一个相邻元素不是twe,则为空|undifined
$("#item1").parent().next(".twe").html();
2、返回之后所有nextAll() 没有通过eq(2)或[2]来读取???用来判断个数?
//查找特定的next
$("#item1").parent().nextAll(".twe").html()
alert(objs.parent().nextAll("td:eq(1)").text());
3、返回上个prev()
$("#item2").parent().prev().html();
$("#item2").parent().prev(".twe").html();
4、返回上所用prevAll()
$("#item2").parent().prevAll(".twe").html()
七、包含选择器
1、包含内容contains(text)
$(".parent1 li:contains(内容)").html();
2、包含节点选择has(exp)
$(".parent1 li:eq(0)").has("a").html()
$(".parent1 li:eq(0):has(a)").html();
八、属性|过滤选择器
1、属性键值选择
$('a[title=num1]')
2、可见性过滤器
2.1、$("#n1 :hidden").eq(0).parent().html();
注意:在jQuery中,visibility: hidden;和opacity: 0;都被视作可见的,因为它们在页面上占据了相应的物理空间。( display:none)
2.2、$("#n1 :visible").length;
九、节点操作
1、内容|节点操作
1.1、添加内容
//在最后添加
$("#p1").append("<p><b>今年是公元2015年</b></p>")
//在第一位添加
$("#p1 p:eq(0)").before("<p><b>今年是公元2015年</b></p>")
alert($("#p1 p:eq(0)").html());
//$("<b>你好吗?</b>").appendTo("p");//将<b>追加到p元素中
$('#box').html($('#box').html() + '<em>www.li.cc</em>');
1.2、替换内容|节点
$("#p1 p:eq(0)").replaceWith("<p><b>今年是公元2015年</b></p>")
alert($("#p1 p:eq(0)").html());
1.3、复制内容|节点
$("#p1 p:eq(1)").clone(true).appendTo("#p1 p:eq(0)");
2、删除节点
2.1、删除当前节点
$("#p1 p:eq(0)").remove();
alert($("#p1 p:eq(0)").html());
2.2、empty()
empty()是将节点清空,清除节点的innerHTML,节点还在
3.样式操作
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); //增加了频率
});
4、属性操作
attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置
$('div').removeAttr('title'); //删除指定的属性
页面加载完成后执行jquery:
1、$(function(){
$("#a").click(function(){
//adding your code here
});
});
2、$(document).ready(function(){
$("#a").click(function(){
//adding your code here
});
});
3、window.onload = function(){
$("#a").click(function(){
//adding your code here
});
}
定义数组
var a = new Array(10);
demo
2、表单选择
3、class选择
4、子节点选择
5、父节点选择
6、同级选择器
7、包含选择器
8、属性过滤器
9、节点操作 内容/值/属性/样式
一、table行列选择
1、定位选择
//多张table用0,1,2区分,后面可以是html();
$("table:eq(0) tr:eq(0) td:eq(0)").text();
1.1、列(行)选择:
$(function(){ var st = new Array(3); var tatal = 0; for (var x=1 ; x<3;x++){ //第一列数字求和 st[x] = $("table:eq(0) tr:eq("+x+") td:eq(1)").text(); tatal += parseInt(st[x]); } alert(tatal); });
二、表单选择
1、input type选择
1.1 type = "text"
//为0可以不写
$("input[type=text]:eq(1)").val()
1.2 type ="checkbox"(name)
$(function(){ var key=""; var ck = $("input[type=checkbox]:checked"); //if(ck.length==1)单选 // alert(ck.val()); //多选 ck.each(function(i){ if(i != 0){ key += ","; } key += this.value; }); $("input[type=text]:eq(0)").val(key) ; });
三、类选择器
alert($(".div1").length); $(".div1").each(function() { alert(this); });
四、子节点选择
1、选取所有直接子节点 使用>
$("#son > p").css('background','green');
1.1、选取特定的直接子节点(:first,last)
$("#son > p:eq(2)").css('background','green');
$("#son > p:last").css('background','green');
1.2、直接子节点的奇偶选择
$("#son > p:even").css('background','green');
$("#son > p:odd").css('background','yellow');
1.3、大于|小于选择
$("#son > p:gt(2)").css('background','green');
$("#son > p:lt(2)").css('background','yellow');
2、使用空格选择子节点(有时候使用>不能获取子节点)
$("table:eq(0) tr:eq(1)").css('background','green');
$("table:eq(0) tr:eq(1) td:eq(2)").css('background','yellow');
$("#son p:eq(1) a").css('background','yellow');
3、使用find("p")方法
$("#item1").closest("ul").find("li:eq(2)").html();
4、使用children(exp)方法(使用较少,不介绍)
五、父节点选择
1、使用parent()
$("#item1").parent().html()
1.1、使用parent(exp)
$("#item1").parent().parent("ul").html()
1.3、使用parents(exp)(不常用:要查找所有exp直到html节点)
$("#item1").parents("ul").html()
2、使用closest(从当前元素开始匹配寻找,发现匹配的元素后停止)
$("#item1").closest("ul").html()
六、同级选择
1、返回下一个next();
$("#item1").parent().next().html();
//,如果下一个相邻元素不是twe,则为空|undifined
$("#item1").parent().next(".twe").html();
2、返回之后所有nextAll() 没有通过eq(2)或[2]来读取???用来判断个数?
//查找特定的next
$("#item1").parent().nextAll(".twe").html()
alert(objs.parent().nextAll("td:eq(1)").text());
3、返回上个prev()
$("#item2").parent().prev().html();
$("#item2").parent().prev(".twe").html();
4、返回上所用prevAll()
$("#item2").parent().prevAll(".twe").html()
七、包含选择器
1、包含内容contains(text)
$(".parent1 li:contains(内容)").html();
2、包含节点选择has(exp)
$(".parent1 li:eq(0)").has("a").html()
$(".parent1 li:eq(0):has(a)").html();
八、属性|过滤选择器
1、属性键值选择
$('a[title=num1]')
2、可见性过滤器
2.1、$("#n1 :hidden").eq(0).parent().html();
注意:在jQuery中,visibility: hidden;和opacity: 0;都被视作可见的,因为它们在页面上占据了相应的物理空间。( display:none)
2.2、$("#n1 :visible").length;
九、节点操作
1、内容|节点操作
1.1、添加内容
//在最后添加
$("#p1").append("<p><b>今年是公元2015年</b></p>")
//在第一位添加
$("#p1 p:eq(0)").before("<p><b>今年是公元2015年</b></p>")
alert($("#p1 p:eq(0)").html());
//$("<b>你好吗?</b>").appendTo("p");//将<b>追加到p元素中
$('#box').html($('#box').html() + '<em>www.li.cc</em>');
1.2、替换内容|节点
$("#p1 p:eq(0)").replaceWith("<p><b>今年是公元2015年</b></p>")
alert($("#p1 p:eq(0)").html());
1.3、复制内容|节点
$("#p1 p:eq(1)").clone(true).appendTo("#p1 p:eq(0)");
2、删除节点
2.1、删除当前节点
$("#p1 p:eq(0)").remove();
alert($("#p1 p:eq(0)").html());
2.2、empty()
empty()是将节点清空,清除节点的innerHTML,节点还在
3.样式操作
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); //增加了频率
});
4、属性操作
attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置
$('div').removeAttr('title'); //删除指定的属性
页面加载完成后执行jquery:
1、$(function(){
$("#a").click(function(){
//adding your code here
});
});
2、$(document).ready(function(){
$("#a").click(function(){
//adding your code here
});
});
3、window.onload = function(){
$("#a").click(function(){
//adding your code here
});
}
定义数组
var a = new Array(10);
demo
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'jquery1.jsp' starting page</title> <script type="text/javascript" src="<%=path %>/resourses/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#p1").remove("#p1 p:eq(1)"); alert($("#p1 p:eq(0)").html()); }); function test1(){ var st = new Array(3); var tatal = 0; for (var x=1 ; x<3;x++){ //第一列数字求和 st[x] = $("table:eq(0) tr:eq("+x+") td:eq(1)").text(); tatal += parseInt(st[x]); } $("table:eq(0) tr:eq(3) td:eq(1)").html(tatal); } function test2(){ var key=""; var ck = $("input[type=checkbox]:checked"); //if(ck.length==1)单选 // alert(ck.val()); //多选 ck.each(function(i){ if(i != 0){ key += ","; } key += this.value; }); $("input[type=text]:eq(0)").val(key) ; } function test3(){ alert($(".div1").length); $(".div1").each(function() { alert(this); }); } function test4(){ $("#son p:eq(1) a").css('background','yellow'); $("table:eq(0) tr:eq(1) td:eq(2)").css('background','yellow'); } function test5(){ alert($("#item1").closest("ul").html()); } function test6(){ var s=$("#item2").parent().siblings().html(); alert(s.length); } function test8(){ var s = $(".parent1 li:eq(0):has(a)").html(); alert(s); } function test8(){ alert($("#n1 :hidden").eq(0).parent().html()); } </script></head> <body> <table> <tr> <td>first</td> <td>second</td> <td>third</td> <td>fourth</td> </tr> <tr> <td>11</td> <td>22</td> <td>33</td> <td>44</td> </tr> <tr> <td>111</td> <td>222</td> <td>3333</td> <td>4444</td> </tr> <td>合计</td> <td onclick="test1()">多少?</td> <td>多少?</td> <td>多少?</td> </tr> </table><br/> _________________________<br/> <form action="#" id="form1"> <input type="text" value="input1"><br/> <input type="text" value="input2"><br/> <input type="checkbox" value="checkbox1">checkbox1<br/> <input type="checkbox" onclick="test2()" value="checkbox2" checked="checked">checkbox2<br/> <input type="checkbox" value="checkbox3" checked="checked">checkbox3<br/> </form> <br/>_________________________<br/> <div class="div1" onclick="test3()">okokokok1</div> <div class="div1" >okokokok1</div> <div class="div1" >okokokok1</div> <div class="div2" >okokokok2</div> <div class="div2" >okokokok2</div> <div class="div2" >okokokok2</div> <div class="div2" >okokokok2</div> <br/>_________________________<br/> <div id ="son"> <p>test1</p> <p><a onclick="test4()">test2</a></p> <p>test3</p> <p>test4</p> <p>test5</p> <p>test6</p> </div> <br/>_________________________<br/> <ul class="parent1"> <li><a id="item1" onclick="test5()">jquery获取父节点</a></li> <li><a onclick="test7()">jquery内容选择器</a></li> <li class="twe"><a >jquery获取父元素1</a></li> <li><a id="item2" onclick="test6()">jquery获取父元素2</a></li> <li><a >jquery</a></li> <li></li> </ul> <div id="n1" onclick="test8()"> <p id="n2" style="display: none;"></p> <p id="n3"> <span id="n4">CodePlayer</span> <input id="n5" type="hidden" value="js"> <span id="n6" style="visibility: hidden;">http</span> <span id="n7" style="opacity: 0;">jQuery手册</span> </p> </div> <div id = "p1"> <p>11111111111111111</p> <p>2222222222222222</p> <p>3333333333333333</p> <p>4444444444444444</p> </div> </body> </html>
发表评论
-
图片引用站
2017-05-07 10:50 526... -
5、获取dom-内容
2015-05-19 11:29 4851、HTMLDivElement alert(obj.inne ... -
5、面包屑导航
2015-04-13 14:48 0当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现 ... -
4、jquery--ajax/json
2015-04-02 11:28 429template: function saveUser() ... -
3、jquery -- 操作函数
2015-04-02 11:22 429now is nullnow is null now is n ... -
1、jquery validate表单验证
2015-03-23 12:09 676简单入门: <%@ page language=&q ... -
1、jquery easyui
2015-03-22 22:01 0jquery ui http://jqueryui.com/ ... -
fff.css
2015-03-15 10:06 01、页面内添加css样式 <head> ... -
fff.extjs
2015-03-11 15:25 0http://extjs.org.cn/ demo:http: ... -
fff、bootsrap
2015-03-11 15:18 0中文教程: http://www.w3cschool.cc/b ... -
llll.anychart_事件监听
2015-03-10 15:28 0http://blessht.iteye.com/blog/1 ... -
anychart_标题和图例
2015-03-10 15:26 0图标题和图例在图表元素中是不可或缺的一部分,标题能表达图的意思 ... -
lll.anychart图形介绍
2015-03-10 15:12 0<转>http://blessht.iteye.c ... -
lllll.anychart(demo)
2015-03-10 13:46 0这是一款商业收费产品,使用未授权的产品时,图表背景会有“Any ... -
llll.div+css布局
2015-03-09 16:54 0div默认占用的宽度是100%,使用float或设置宽度调整; ... -
lll、移动的文字和图片
2015-03-09 15:24 0marquee语法: 默认是从左往右循环移动 <marq ... -
llll.frame(frameset &&iframe)
2015-03-09 15:10 0frame主要将浏览器窗口分割成几个独立的窗口,浏览器可以同时 ... -
lll.html
2015-03-09 13:40 0文字/属性 对齐:<p align="rig ... -
lll.dialog关闭事件
2015-03-06 10:45 0dialog 方法关闭事件 $('#dialogDiv').d ... -
###.jquery-Ligerui
2015-03-06 09:55 0http://www.ligerui.com/
相关推荐
jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两
JQuery选择器 解析:为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签 1.层次选择器 <!-- 当点击h2元素时,为#menu下的元素添加色为#09F的颜色背景 --> <!-- [removed] $(function () { $...
第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容...
#jquery-segmented-picker ##Description 这个插件只是文本输入的包装器,可以成为您希望的任何格式的选择器。 它旨在简单且看起来简单,同时让您可以控制用户编写的内容。 它的主要思想是避免在仅使用键盘的情况下...
jQuery 列单元格选择器 这个插件向 jQuery 选择器 API 添加了一个新的选择器,用于按列索引检索表格单元格。 它透明地支持具有列和行跨度的表格,无论您的表格多么复杂。 语法简单且与其他 jQuery 选择器相似,因此...
个人觉得好友选择器是一个比较复杂的组件,涉及到前端和后端的整合。在这里我主要是介绍端段如何实现,后端的数据,我用了几个简单的ASP页面来提供。 1.代码风格 我的组件是作为一个Jquery 的插件来做的。把整个...
Sizzle 原本是 jQuery 中用来当作 DOM 选择器的,后来被 John Resig 单独分离出去,成为一个单独的项目,可以直接导入到项目中使用。 点击这里下:jquery/sizzle。 本来我们使用 jQuery 当作选择器,选定一些 #id 或...
鉴于这种复杂的体系架构,以及对浏览器缺陷的完善也非短期可以完成,开始为这款机顶盒浏览器移植jQuery,从而开始了对jQuery源码的学习和分析。 从2011年6月开始,开始把心得和记录整理成《jQuery 1.6.1源码分析系列...
jQuery(‘:not(selector)’) 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 代码如下: ”a”>sdfsdfs</p> ”b”>...
jQuery 1.3.2(2009年2月):这次小版本升级进一步提升了库的性能,例如改进了:visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外,也支持查询的元素按文档顺序返回。 jQuery 1.4(2010年1月14号...
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
还有一点值得提提,居闻JQUERY的选择器不是自己公司原创的,是用第三方选择器改出来的!minggeJS的选择器问心无愧地说全部是我原创开发的 2:众所周之,JQUERY的动画原理是采用定时器方原理,minggeJS原理不同,...
multiple(selector1, selector2),可以选择多个元素或者表达式,包装成jQuery对象的集合 例子:$("div,span") id(id) 例子:$("#id") class(class) 例子:$(".class") element(element) 例子:$("div")
你也将学到jQuery的基本工作原理,包括它如何在项目中应用,以及它的内核(强大的选择器引擎)如何工作。 1.1 为什么选择jQuery 在Web应用中,JavaScript以难以驾驭闻名。浏览器兼容性差、难以调试,又有着使人...
jQuery相对于其他的javascript框架优秀的特点之一就是元素选择功能,通过简单的一条件语句可以查询一些复杂的元素
jQuery 密码复杂性小部件用于密码复杂性验证的 jQuery 小部件依赖项... 这可以使用data-submit-button属性设置,传递data-submit-button的选择器,或者您也可以submitButton选项submitButton 将data-validate-complexit
旨在帮助您轻松理解最复杂的选择器。 元素面板上的两个新的侧栏jQuery数据侧栏-显示所选元素的jQuery和HTML5数据。 jQuery Events边栏-显示所选元素的事件处理程序,包括对所选元素有影响的活动或委托给其他元素的...
10-25 2 jquery id选择器 层次选择器 10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 ...
jQuery是继Prototype之后的又一个优秀JavaScript框架 Jquery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax...