jQuery基础篇

jQuery 选择器

元素选择器基于元素名选取元素。 在页面中选取所有 <p> 元素:语法如下:$("p")

②#id 选择器通过 HTML 元素的 id 属性选取指定的元素。语法如下:$("#test")

类选择器可以通过指定的 class 查找元素。语法如下:$(".test")

 

二常用的jquery事件

click() 方法是当按钮点击事件被触发时会调用一个函数

当双击元素时,会发生 dblclick() 事件。

当鼠标指针穿过元素时,会发生 mouseenter() 事件。

当鼠标指针离开元素时,会发生 mouseleave() 事件。

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown() 事件。

当在元素上松开鼠标按钮时,会发生 mouseup() 事件。

hover()方法用于模拟光标悬停事件。

当元素获得焦点时,发生 focus() 事件

当元素失去焦点时,发生 blur() 事件。

jQuery 捕获及设置

获得设置内容

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

获取设置属性

attr() 方法用于获取属性值

jQuery添加删除元素

添加元素

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

删除元素

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

jQuery操作css

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

jQuery尺寸方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

jQuery遍历

祖先

parent() 方法返回被选元素的直接父元素

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

后代

children() 方法返回被选元素的所有直接子元素也可以使用可选参数来过滤对子元素的搜索 也可以使用可选参数来过滤对祖先元素的搜索。

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

同胞

siblings() 方法返回被选元素的所有同胞元素也可以使用可选参数来过滤对同胞元素的搜索。

next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

过滤

first() 方法返回被选元素的首个元素

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被 返回。

not() 方法返回不匹配标准的所有元素。提示:not() 方法与 filter() 相反。

jquery选择器

1.基本选择器

$("#id")            //ID选择器

$("div")            //元素选择器

$(".classname")     //类选择器

$(".classname,.classname1,#id1")     //组合选择器

 

2.层次选择器

 $("#id>.classname ")    //子元素选择器

$("#id .classname ")    //后代元素选择器

$("#id + .classname ")    //紧邻下一个元素选择器

$("#id ~ .classname ")    //兄弟元素选择器

 

3.过滤选择器(重点)

$("li:first")    //第一个li

$("li:last")     //最后一个li

$("li:even")     //挑选下标为偶数的li

$("li:odd")      //挑选下标为奇数的li

$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)

$("li:gt(2)")    //下标大于 2 的li

$("li:lt(2)")    //下标小于 2 的li

$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

 

3.2内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素

$("td:empty")                 //不包含子元素或者文本的空元素

$("div:has(selector)")        //含有选择器所匹配的元素

$("td:parent")                //含有子元素或者文本的元素

 

3.3可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素,或type为hidden的元素

$("li:visible")      //匹配所有可见元素

 

3.4属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素

$("div[id='123']")        // id属性值为123的div 元素

$("div[id!='123']")        // id属性值不等于123的div 元素

$("div[id^='qq']")        // id属性值以qq开头的div 元素

$("div[id$='zz']")        // id属性值以zz结尾的div 元素

$("div[id*='bb']")        // id属性值包含bb的div 元素

$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素

 

3.5状态过滤选择器

$("input:enabled")    // 匹配可用的 input

$("input:disabled")   // 匹配不可用的 input

$("input:checked")    // 匹配选中的 input

$("option:selected")  // 匹配选中的 option

 

4.表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素

$(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]"),推荐使用$("input:text")效率更高,下同

$(":password")   //所有密码框

$(":radio")      //所有单选按钮

$(":checkbox")   //所有复选框

$(":submit")     //所有提交按钮

$(":reset")      //所有重置按钮

$(":button")     //所有button按钮

$(":file")       //所有文件域

posted @ 2019-03-19 19:27  搜戴斯  阅读(168)  评论(0编辑  收藏  举报