jQuery基础之一

时间 2019-12-11

标签 jquery 基础之一栏目 JQuery 繁體版

原文原文链接

jQuery基础之一

初识jQuery

jQuery封装JavaScript中多个好用的函数成为并造成代码库，
操做时也更符合咱们的习惯，而且减小了浏览器之间的兼容性。javascript

引入 本地 <script src="jquery.js" type="text/javascript"></script> 联网 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

jQuery基础选择器

选择器
    选择网页中的DOM元素,精确更改网页中各个DOM元素的CSS属性等

    jQuery中的基础选择器很相似于CSS

普通选择器

标签选择器 如：$("div") id 选择器 $("#ID") .class 选择器 $(".className") * 选择器 $("*") 获取网页中的所有元素包括<head>,<body> 技巧：如获取div标签下的所有子元素 $("div *") slec1,slect2,selecN 选择器 $("slec1,slect2,selecN") 请获取选择器slec1,slect2,selecN选择的元素 实例: $("div,.red,#one")==$("div")+$(".red")+$("#one") 注意： 选择器之间用","隔开,只有一个选引号

DOM层级以内

prev+next选择器 $("prev+next") 查找与"prev"元素紧邻的下一个"next"元素 实例： $("div+p") 释义:查找与div同一DOM层级的下面的第一个p元素 prev~siblings选择器 相似于prev+next只不过是后面全部的"siblings"元素

DOM层级之间

ance desc 选择器 ance==ancestor desc==descendant祖先子孙选择器 实例： $("div p") 将获取页面中全部div下全部p元素 注意： ance desc之间为一个空格 获取的是全部的desc后代元素 不单单是第一代子元素 parent>child 选择器 $("parent>child") 相似于祖先子孙选择器但只是parent的第一代孩子

jQuery过滤性选择器

过滤性选择器是在基础选择器的基础上,在对得到的元素对象加以筛选。jquery

注意：下列全部的过滤性选择器 紧邻前面的基础性选择器(之间没有空格) 全部过滤性选择器都不能独立存在,前面要有基础选择器

普经过滤性选择器

:first 过滤性选择器 从已经获取到的全部元素中只选择第一个 实例： $("li:first") 从已经获取到的全部li标签中只选择第一个 :last 过滤性选择器 同:first

:eq(index) 过滤选择器 从一组标签中选择一个任意的一个 实例： $("li:eq(3)") 释义：从已经获取到的全部li标签中只选择第四个 :contains(text) 过滤选择器 对已经获取到的元素再次选择,只保留含有text文本的元素 实例: $("li:contains('土豪')") 释义：选择li标签内部含有"土豪"的li标签 注意： 当具备双重引号时必须是单双引号一块儿 不能只有单引号或只有双引号 contains具备"s" :has(selector) 过滤选择器 获取选择器中包含指定selector的全部元素 实例： $("li:has('p')") 释义：获取包含p标签的全部li标签

属性过滤选择器

[attribute=value] 属性选择器 实例： $("li[title='黛玉']") 获取title的属性值为"黛玉"的li标签 [attribute!=value] 属性选择器 取反[attribute=value] [attribute*=value] 属性选择器 实例: $("li[title*='最']") 获取title的属性值中只要包含"最"字便可的全部li标签

特殊属性

:hidden 过滤选择器 获取指定的全部具备隐藏属性的元素 实例： $("p:hidden") 释义:获取全部具备display:none属性的p标签 :visible 过滤选择器 与:hidden相反

子元素位置

:first-child 子元素过滤选择器 实例: $("li:first-child") 只获取li是第一个子孩子的li标签 :last-child 子元素过滤选择器 实例: $("li:first-child") 只获取li是最后一个子孩子的li标签

jQuery表单选择器

针对表单元素设置的选择器 注意： 表单元素的过滤选择器与前面的基础选择器之间具备空格 且全部的基础选择器都是获取的整个表单

普通选择器浏览器

:input 获取所有的表单元素 实例 $("form :input") 获取表单的全部子元素 :text 获取表单中所有的单行文本框 <input type="text" /> 实例 $("form :text") :password 获取密码框

选择框选择器

:radio 获取所有单选按钮 :checkbox 获取所有复选框

按钮选择器

:submit 实例 $("#frmTest input:submit") 注意： 获取提交按钮时,前面要有input :button 获取所有的<button>

状态选择器

:checked 获取如单选框,复选框，下拉列表框等处于该表单下的 选中状态的所有元素 :selected 只获取<select>中处于选中状态的option 实例： $("#frmTest :selected")