首页 相关文章 jQuery入门[2]-选择器

jQuery入门[2]-选择器

jQuery之所以令人爱不释手,在于其强大的选择器表达式令DOM操作优雅而艺术。
jQuery的选择符支持id,tagName,css1-3 expressions,XPath,参见:http://docs.jquery.com/Selectors
DEMO:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"
head
titleSelector/title
script src="../scripts/j...[ 查看全文 ]

2016-02-19 标签:
  • 标签:Web开发
    $的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): ----凡是运用$,其返回值是一个object $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签...[ 查看全文 ]
  • 标签:Web开发
    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 序号选择器含义1. * 通用元素选择器,匹...[ 查看全文 ]
  • 标签:Web开发
    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有thtd元素标签 // $("a") // 表示所有a元素标签 // $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 // $("#rating"); // 表示id=rating的元素 // $("#orderedlist li...[ 查看全文 ]
  • 标签:Web开发
    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” $...[ 查看全文 ]
  • 标签:Web开发
    比如下面html代码 代码如下: ul li title="ttt"li-1/li lili-2/li li title="fffff"li-2/li /ul div title="ttt"li-1/div divli-2/div div title="fffff"li-2/div 第一种根据属性选择E[@attr] $("[@title]").click().......... 即选择所有元素内 属性带有title的元素 即 li title="ttt"li-1/li li title="fffff"li-2/li div title="ttt"li-1/div div title="fffff"li-2/div $("di...[ 查看全文 ]
  • 标签:Web开发
    在jQuery出世以来,它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至...[ 查看全文 ]
  • 标签:Web开发
    有了Jquery的选择器,吃饭饭饭香,身体倍棒…… 1.基本 我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法 css样式也有几种情况:1.类样式 2.id样式 3.标签样式, 如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{} 如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{} 如果有标...[ 查看全文 ]
  • 标签:Web开发
    1 基本选择器 $(#id) 根据给定的id匹配一个元素 $(.class) 根据给定的类名匹配元素 $(element) 根据给定的元素名匹配元素 $(*) 匹配所有元素 $(selector1,selector2,...,selectorN) 将每一个选择器匹配到的元素合并后一起返回 2 层次选择器 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 $("parent child") 只选取parent元素下的child(子层级)元素,与$("anc...[ 查看全文 ]
  • 标签:Web开发
    contains选择符 contains选择符是指对象中包括指定内容的对象本身,如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格,设置这些单元格的样式类型添加“highlight”类。 下面的代码,运行后,需要刷新下,以便加载jquery !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head script src="ht...[ 查看全文 ]
  • 标签:Web开发
    效果如图所示: 核心代码: 代码如下: 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为...[ 查看全文 ]
  • 第三 ,图片下拉列表框的滚动,要保证自动滚动到相应的图片出现在列表框的顶端:当手动滚动停止时,如果滚动条趋势是向下滚动,则自动继续向下滚动直至最近的图片在列表框的顶端,反之亦然。 例子中我们将所有供选图片命名为“0.gif”、“1.gif”……“9.gif”,并放在“head”目录下。下面我们以实际程序解决这些问题: <!--建立表单-- <form name="myform" method="post" action=""请选择...[ 查看全文 ]
  • 标签:Web开发
    根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2") 代码如下: divAAA/div divBBB/div divCCC/div 根据标签选择, 如: $("span") 代码如下: divspanAAA/span/div divBBB/div spanCCC/span 根据样式的类名选择, 如: $(".class1") 代码如下: divAAA/div divBBB/div divCCC/div 选择所有对象是: $("*") 可混合使用, 如(复制代码): !docty...[ 查看全文 ]
  • 标签:Web开发
    div div jquery1274844839136="1"标题1/div div jquery1274844839136="2"标题2/div div jquery1274844839136="3"标题3/div div jquery1274844839136="4"标题4/div div jquery1274844839136="5"标题5/div div jquery1274844839136="6"标题6/div /div div进入之后才能看到效果!/div script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"/scriptscript type="text/javascript" $(d...[ 查看全文 ]
  • 类似Dreamweaver的颜色选择器 作者:浙江省温岭市电信局 王骏 一、前言 用过Dreamweaver的朋友一定对它的颜色选择器留下深刻的印象,因为它确实相当好用,其中的一项比较实用的功能是可以选取屏幕上任意一点的颜色。笔者按此思路封装了一个称为CColorPicker的类实现了类似的功能,并修正了Dreamweaver颜色选择器将屏幕上选取的颜色作近似处理的缺点。本文详细介绍了CColorPicker类的...[ 查看全文 ]
  •   相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有。但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的。 演示:(点击这里在新窗口中打开演示页) 我们先来看下做出这个控件需要解决哪些问题。 第一 ,图片下拉列表框是一个层,它在选择提示框点击时出现,出现后在选...[ 查看全文 ]
  • 标签:Web开发
    对此,我把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:n...[ 查看全文 ]
  • CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些瘟疫在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS选择器,它们可以定位于...[ 查看全文 ]
  • 标签:ASP
      在WEB结构程序开发中,日期数据在表单中输入可以采用很多种方法,常见的有: 1、在文本框中让用户按规定好的日期格式直接输入。这种方法最简单,可是用户使用起来很麻烦,而且程序员还要在后台对输入的日期进行数据验证,所以显得很笨拙; 2、用下拉列表列出年份、月份、天数由用户选择输入。这种方法更麻烦,用户操作看似比上一种方便了,可是每一个日期输入都需要程序员在后台对年份、...[ 查看全文 ]
  • 相信大家都见过一些软件里的图片下拉选择控件吧?喏,OICQ中就有。但网页上的你见过没有?小阳今天就为你推出你心怡已久的这个控件,下面演示中就是了!效果还可以吧?心动不如行动,我们来看下是怎么弄出来的。 演示:(点击这里在新窗口中打开演示页)       我们先来看下做出这个控件需要解决哪些问题。 第一 ,图片下拉列表框是一个层,它在选择提示框点击时出现...[ 查看全文 ]
  • primary_text_yellow.xml 代码如下: ?xml version="1.0" encoding="utf-8"? !-- Copyright (C) 2008 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable la...[ 查看全文 ]
手机页面 收藏网站 回到头部