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>
    <title>Selector</title>
    <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
</head>
<body>
    <input value="1" /> +
    <input value="2" />
    <input type="button" value="=" />
    <label> </label>
    <script type="text/javascript">
        $("input[type='button']").click(function(){
            var i = 0;
            $("input[type='text']").each(function(){
                i += parseInt($(this).val());
            });
            $('label').text(i);
        });
        $('input:lt(2)')
            .add('label')
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
    </script>
</body>
</html>

运行效果如下：

代码分解：
$("input[type='button']")用于找到type属性为button的input元素（此为CSS表达式，IE7才开始支持，所以在IE6中通常用jQuery的这种表达式代替CSS代码设置样式）。click()函数为button添加click事件处理函数。
在button_click时，$("input[type='text']")找出所有输入框，each()函数遍历找出来的数组中的对象的值，相加后设到label中。
        $('input:lt(2)')
            .add('label')
两行代码意为：所有input中的前面两个（lt表示序号小于）再加上label对象合并成一个jQuery对象。
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
以上三行代码都是针对之前的jQuery对象设置CSS样式，如果一次需要设置多个CSS值，可用另一种形式，如：
            .css({'border':'none','borderBottom':'solid 1px navy','width':'30px'});
css()函数如果只传一个字符串参数，则为取样式值，比如css('color')为取得当前jQuery对象的样式属性color的值。jQuery对象有多种这样的函数，比如，val('')为设value，val()为取value，text('text')为设innerText,text()为取得innerText，此外还有html(),用于操作innerHTML,而click(fn)/click(),change(fn)/change()……系统函数则为事件的设置处理函数与触发事件。
由于多数jQuery对象的方法仍返回当前jQuery，所以jQuery代码通常写成一串串的，如上面的
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
，而不需要不断重复定位对象，这是jQuery的链式特点，后面文章还会有补充。

referrence:http://docs.jquery.com/Selectors

转载于:https://www.cnblogs.com/callbin/archive/2009/04/16/1437304.html

jQuery入门[2]－选择器相关推荐

JQuery入门(1) - 选择器
JQuery入门(1) - 选择器 $("元素") // 选取元素 $("元素.类名") // 选取元素中class为"类名"的元素 $(& ...
jQuery入门、选择器、事件、静态方法、动画
目录第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...
jQuery入门基础——选择器
jQuery01-入门-选择器目标:jQuery第一次课入门和选择器重点:选择器问: 3W1H: What:jQuery是什么? Why:为什么要学jQuery? Where:什么情况下用 ...
jQuery——入门（一）JQuery的简介与基本选择器的使用
JQuery入门(一)-- 基本简介与基本选择器的使用一.jQuery简介 jquery是2006年1月由美国人John Resig在纽约barcamp发布,目前已经成为辅助javascript开发 ...
jQuery入门选择器
Hilo Everybody wellcometo my channel ! 今天Lion带大家初步认识一下 jQuery(jquery01) 首先第一个我们来聊聊 & ...
jQuery入门基本语法选择器
文章目录一.了解什么是jQuery&为什么要学jQuery? 二.jQuery的基本语法? 三.jQuery如何使用? 四.jQuery的选择器? 五.推荐使用开发工具:HBuilder X ...
【第一章】 jQuery入门---选择器 and $工具属性CSS
jQuery1:入门知识--选择器 3W1H What?是什么? JavaScript库:封装了很多JS代码 JavaScript库:jQuery(90%).E ...
jQuery(入门选择器）
一,简介 jQuery的"3W1H":What,why,Where,How 1.jQuery是什么(What) jQuery是一个JavaScipt库(由JavaScript专家J ...
Jquery入门详解
JQuery 入门介绍 1.JQuery概述:Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器(I ...
jQuery——入门（三）JQuery DOM操作（核心处理和文档处理）
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...

jQuery入门[2]－选择器

jQuery入门[2]－选择器相关推荐

最新文章

热门文章