【Jquery中CSS选择器用法分析_jquery】教程文章相关的互联网学习教程文章

从零开始学习jQuery (二) 万能的选择器【图】

一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显减轻开发人员的工作量. 二.前言 编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如"拥有title属性并且值中包含test的<a>元素", 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步. ...

jquery选择器(常用选择器说明)

基本选择器:$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素,返回div元素数组$(".myClass") 选择使用myClass类的css的所有元素$("*") 选择文档中的所有的元素可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")层叠选择器: $("form input...

jquery nth-child()选择器的简单应用【图】

通过网上咨询使用这个选择器便很容易的解决。特此记录一下。 下面是主要的代码 js脚本: 代码如下:<script type="text/javascript"> $(document).ready( function () { //每隔五行给li加一个样式 $(.article_li li:nth-child(5n)).addClass(liborder); $(.article_li li:last).addClass(liborder); } ); </script> html代码: 代码如下:<ul class="article_li"> <li> <label class="datename"> <span>2010-06-12 08:37:59 </spa...

jQuery 练习[二] jquery 对象选择器(1)【图】

根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") 代码如下:<div id="div1">AAA</div> <div id="div2">BBB</div> <div id="div3">CCC</div> 根据标签选择, 如: $("span") 代码如下:<div><span>AAA</span></div> <div>BBB</div> <span>CCC</span> 根据样式的类名选择, 如: $(".class1") 代码如下:<div class="class1">AAA</div> <div class="class2">BBB</div> <div class="class1">CCC</div> 选择所有对象是: $("*")...

jquery css 选择器演示代码【图】

效果如图所示:核心代码: 代码如下:<script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所有div的属性 $('div > span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改变所有div下的span元素的属性 $('#two >.mini').css("background","red");//id为two的div内的所有class为mini的元...

jquery 导航条的效果(css选择器控制)

标题1 标题2 标题3 标题4 标题5 标题6 进入之后才能看到效果! $(document).ready(function () { myHide(); }); function myHide() { //alert("hello"); //注册事件 $(".m1").bind('mouseover', m1_mouseover); $(".m1").bind('mouseout', m1_mouseout); $(".m2").bind('mouseover', m2_mouseover); $(".m2").bind('mouseout', m2_mouseout); $(".m3").bind('mouseover', m3_mouseover); $(".m3").bind('mouseout'...

jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。 (EG) li:nth-child(3n){background:orange;...

jQuery Selector选择器小结

//jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 // $("#rating"); // 表示id=rating的元素 // $("#orderedlist > li"); // 表示id=orderedli...

JQuery contains的选择器

contains选择符 contains选择符是指对象中包括指定内容的对象本身,如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格,设置这些单元格的样式类型添加“highlight”类。 下面的代码,运行后,需要刷新下,以便加载jquery$(document).ready(function(){ $("div:contains('John')").css("text-decoration", "underline"); }); John Resig George Martin Malcom John Sinclair J. Oh...

jQuery温习篇 强大的JQuery选择器

在jQuery出世以来,它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已...

跟着Jquery API学Jquery之一 选择器

有了Jquery的选择器,吃饭饭饭香,身体倍棒…… 1.基本 我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法 css样式也有几种情况:1.类样式 2.id样式 3.标签样式, 如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{} 如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{} 如果有标签<div></div>,那么我们定义的样...

jquery CSS选择器笔记

去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 序号 选择器 含义1. * 通用元素选择器,匹配任何元素2. E 标签选择器...

锋利的jQuery 要点归纳(一) jQuery选择器

1 基本选择器$(#id) 根据给定的id匹配一个元素$(.class) 根据给定的类名匹配元素$(element) 根据给定的元素名匹配元素$(*) 匹配所有元素$(selector1,selector2,...,selectorN) 将每一个选择器匹配到的元素合并后一起返回2 层次选择器$("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素$("parent > child") 只选取parent元素下的child(子层级)元素,与$("ancestor descendant")有区别...

jQuery 选择器理解

$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): ----凡是运用$,其返回值是一个object $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".cl...

jQuery 树形结构的选择器

DOM结构其实也是一种树形结构,jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括:children(), parent(), parents(), next(), prev(), siblings(). 选择某个元素的"孩子" - children() 代码如下:<ul id="parent"> <li id="son1">第一列</li> <li id="son2">第二列</li> <li id="son3">第三列</li> </ul> $("#parent").children().length //得到所有的”孩子“(li)的个数,“3” $("#parent").child...