jQuery学习笔记之选择器

本文介绍jQuery这一轻量级JS库的基本概念、下载方式及使用方法。包括如何通过Google或Microsoft CDN加载jQuery,解释了jQuery的就绪函数作用,并展示了常用的选择器语法。

 jQuery是一个轻量级的JS库,其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情,封装了大量的DOM操作,能够在不同的浏览器中兼容。

jQuery的下载:

共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。

这两个版本都可从jQuery.com 下载。

Google 和 Microsoft 对 jQuery 的支持都很好。

如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

<head>

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

</script>

</head>

使用 Microsoft 的 CDN

<head>

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>

</head>JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!


jQuery有一个就绪函数,所有的jQuery函数都位于就绪函数之中

$(doucument).ready(

function(){

}

);

这是为了防止在文档没有完全加载之前就运行函数,操作可能失败。


jQuery的语法:

·          $(selector).action();美元符号定义 jQuery

·          选择符(selector)“查询”和“查找” HTML 元素

·          jQuery 的 action() 执行对元素的操作

比如:

$(“#test”).hide()隐藏id=”test”的元素


jQuery的选择器:


$("#lastname")     id="lastname" 的元素

$(".intro")    所有class="intro" 的元素

$("p") 所有 <p> 元素

$(".intro.demo")   所有class="intro" 且 class="demo" 的元素

$("p:first")   第一个 <p> 元素

$("p:last")    最后一个 <p> 元素

$("tr:even")   所有偶数 <tr> 元素

$("tr:odd")    所有奇数 <tr> 元素

$("ul li:eq(3)")   列表中的第四个元素(index 从 0 开始)

$("ul li:gt(3)")   列出 index 大于 3 的元素

$("ul li:lt(3)")   列出 index 小于 3 的元素

$("input:not(:empty)")   所有不为空的 input 元素

$(":header")   所有标题元素 <h1> -<h6>

$(":contains('W3School')")  包含指定字符串的所有元素

$("p:hidden") 所有隐藏的 <p> 元素

$("table:visible")    所有可见的表格

$("[href]")    所有带有 href 属性的元素

$("[href='#']")    所有 href 属性的值等于 "#" 的元素

$("[href!='#']")   所有 href 属性的值不等于 "#" 的元素

$("[href$='.jpg']")   所有 href 属性的值包含以 ".jpg" 结尾的元素

$(":input")    所有 <input> 元素

$(":text") 所有 type="text" 的 <input> 元素

$(":password")     所有type="password" 的 <input> 元素

$(":radio")    所有 type="radio"的 <input> 元素

$(":checkbox")     所有type="checkbox" 的 <input> 元素

$(":submit")   所有type="submit" 的 <input> 元素

$(":submit")   所有type="submit" 的 <input> 元素

$(":button")   所有type="button" 的 <input> 元素

$(":image")    所有 type="image"的 <input> 元素

$(":file") 所有 type="file" 的 <input> 元素

$(":enabled") 所有激活的 input 元素

$(":disabled")     所有禁用的 input 元素

$(":selected")     所有被选取的 input 元素

$(":checked") 所有被选中的 input 元素


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值