vue中jquery详情

jQuery基本语法

$(selector).action()

基本选择器：$("#id")

标签选择器:$("tagName")

class选择器：$(".className")

配合使用：$("div.c1")

所有元素选择器：$("*")

组合选择器：$("#id,.className,tagName")

层级选择器：

$("x y") x的所有后代y（子子孙孙)

$("x>y") x的所有儿子(儿子)

$("x+y") 找到所有紧挨在x后面的y

$("x~y") x之后所有的兄弟y

基本筛选器

:first 第一个

:last 最后一个

:eq(index) 索引等于index的那个元素

:even 匹配所有索引值为偶数的元素，从0开始计数

:odd 匹配所有索引值为奇数的元素，从0开始计数

:gt(index) 匹配所有大于给定索引值的元素

:lt(index) 匹配所有小于给定索引值的元素

:not 移除所有满足not条件的标签

:has 选取所有包含一个或多个标签在其内的标签

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器

[attribute]

[attribute=value] 属性等于

[attribute!=value] 属性不等于

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

$(":checkbox")  // 找到所有的checkbox

表单对象属性

:enabled

:disabled

:checked

:selected

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

筛选器方法

下一个元素：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一个元素：

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntill

父亲元素：

$("#id").parent()

$("#id").parents() 查找当前元素的所有的父亲元素

$("#id").parentsUntil() 查找当前元素的所有的父亲元素，直到匹配的那个元素为止

儿子和兄弟元素：

$("#id").children() 儿子们

$("#id").siblings() 兄弟们

查找：搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法

$("div").find("p") 等价于$('div p')

筛选：筛选出与指定表达式匹配的元素集合

$("div").filter(".c1") 从结果集中过滤出有c1样式类的 等价于$("div.c1")

操作标签

样式类：

addClass(): 添加指定的css类名

removeClass(): 移除指定的css类名

hasClass(): 判断样式存不存在

toggleClass(): 切换css类名，如果有就移除

示例：开关灯和模态框

css("color","red")

$("p").css("color","red");

位置操作：

offset(): 获取匹配元素在当前窗口的相对偏移或设置元素位置

position():获取匹配元素相对父元素的偏移

scrollTop():获取匹配元素相对滚动条顶部的偏移

srollLeft():获取匹配元素相对滚动条左侧的偏移

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

html代码

html():取的第一个匹配元素的html内容
html(val):设置所有匹配元素的html内容

文本值

text():取得所有匹配元素的内容
text(val):设置所有匹配元素的内容

值

val():取得第一个匹配元素的当前值
val(val):设置所有匹配元素的值
val([val1,val2])  设置多选的checkbox，多选select的值

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

select multiple id="s1"
    option value="1"1/option
    option value="2"2/option
    option value="3"3/option
/select

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

属性操作

用于id等自定义属性

attr(attrName) 返回第一个匹配的属性值

atrr(attrName,attrValue) 为所有匹配元素设置一个属性值

attr({k1:v1,k2:v2}) 为所有匹配元素设置多个属性值

removeAttr() 从每一个匹配的元素中删除一个属性

用于checkbox和radio

pop 获取属性

removeProp() 移除属性

文档处理：