温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery基础系列(一)---选择器介绍

发布时间:2020-07-09 22:13:16 来源:网络 阅读:668 作者:iszeo 栏目:web开发

   jQuery是什么?它是一个JavaScript库,它的存在大大的简化了JavaSript的编程。有些人会想,既然已经有JavaScript存在了,它的功能不是更强大吗,为什么要使用jQuery呢?其实选择它主要是因为它简单,可以为我节省下大量的时间,毕竟博主主业是PHP,更重要的就是,兼容性,一直认为jQuery最强大的地方就是它基本上可以兼容各大浏览器,这样就不用费脑力去调试各个浏览器的不同了。虽然有点懒,实用就好。


jQuery库包含以下特性:

   1.HTML元素选取

   2.HTML元素操作

   3.CSS操作

   4.HTML事件函数

   5.JavaScript特效与动画

   6.HTML DOM 遍历和修改

   7.AJAX

   8.Utilities


jQuery的基本语法:

  JQuery 语法是为 HTML 元素的选取编制,可以对元素执行某些操作。

   基础语法是:$(selector).action()

   1.美元符号定义 jQuery

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

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


文档就绪函数:

   $(document).ready(function(){

       //这里开始进行jQuery的操作    

   })

一般Jquery代码都会写入在这个函数里面,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

/*===================================简介完毕,下面来了解一下jQuery的选择器=========================================*/

jQuery的选择器完美的提现了他的HTML元素选取特性

下面是Jquery的选择器参考手册(来源:W3CSchool网

选择器

实例

选取

*

$("*")

所有元素

#id

$("#lastname")

id=lastname 的元素

.class

$(".intro")

所有class=.intro的元素

element

$("p")

所有 <p> 元素

.class.class

$(".intro.demo")

所有class=.introclass=.demo的元素




:first

$("p:first")

第一个 <p> 元素

:last

$("p:last")

最后一个 <p> 元素

:even

$("tr:even")

所有偶数 <tr> 元素

:odd

$("tr:odd")

所有奇数 <tr> 元素




:eq(index)

$("ul li:eq(3)")

列表中的第四个元素(index 从 0 开始)

:gt(no)

$("ul li:gt(3)")

列出 index 大于 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小于 3 的元素

:not(selector)

$("input:not(:empty)")

所有不为空的 input 元素




:header

$(":header")

所有标题元素 <h2><h3>...

:animated


所有动画元素




:contains(text)

$(":contains('W3CSchool')")

包含文本的所有元素

:empty

$(":empty")

无子(元素)节点的所有元素

:hidden

$("p:hidden")

所有隐藏的 <p> 元素

:visible

$("table:visible")

所有可见的表格




s1,s2,s3

$("th,td,.intro")

所有带有匹配选择的元素




[attribute]

$("[href]")

所有带有 href 属性的元素

[attribute=value]

$("[href='#']")

所有 href 属性的值等于 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 属性的值不等于 "#" 的元素

[attribute$=value]

$("[href$='.jpg']")

所有 href 属性的值包含 ".jpg"  的元素




:input

$(":input")

所有 <input> 元素

:text

$(":text")

所有 type="text" 的  <input> 元素

:password

$(":password")

所有 type="password" 的  <input> 元素

:radio

$(":radio")

所有 type="radio" 的  <input> 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的  <input> 元素

:submit

$(":submit")

所有 type="submit" 的  <input> 元素

:reset

$(":reset")

所有 type="reset" 的  <input> 元素

:button

$(":button")

所有 type="button" 的  <input> 元素

:p_w_picpath

$(":p_w_picpath")

所有 type="p_w_picpath" 的  <input> 元素

:file

$(":file")

所有 type="file" 的  <input> 元素




:enabled

$(":enabled")

所有激活的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被选取的 input 元素

:checked

$(":checked")

所有被选中的 input 元素

由于选择器的种类繁多,这里就不一一做介绍了,大家可以去W3Cschool网里看看他们的实例,然后自己做一下各种各样的尝试,有助于加深记忆。

这个系列的文章的内容是博主从网上的一些资料通过自己的简介整合而成,以后会陆续发出后续文章,为自己加强对jQuery的理解,更好的使用它。jQuery对于Web编程来说是个挺实用的玩意,希望我的文章能够给大家带来小小的帮助。





向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI