1.可以官网下载jQuery源文件,在script中引用
2.可以直接跨域引用
3.如果在vue中可以 npm i jquery --save 下载使用
这里我们就使用第一种方法使用,在这之前需要先下载jQuery
(一、层次选择器)
html结构如图
<div>
<span class="one">5</span>
<p>6</p>
<span>66</span>
<p>88</p>
</div>
script结构
1.+选择一个同辈元素
<script src="../jQuery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(
$('.one + p').click(function(){
alert(1)
})
)
//点击6的时候会弹出1 只选择一个
</script>
2.~表示所有被选择了的同辈元素
$(document).ready(
$('.one ~ p').click(function(){
alert(1)
})
)
//点击所有的p元素都会弹出1
(二、过滤选择器)
1.基本过滤器
就以下的例子,选取的是div自生,不是子元素
$(‘div :frist’)
$(‘div :last’)
$(‘div :not(.mydiv)’)
$(‘div :event’)
$(‘div :odd’)
$(‘div :eq(index)’)
$(‘div :gt(index)’)
$(‘div :lt(index)’)
$(‘div :focus’)
2.内容过滤器
$(‘div :contains(‘影久’)’) //选择包含有影久文本内容的div
$(‘div :empty’) //选择空的div 空标签的意思
$(‘div :has( p)’) //选择含有p元素的 div元素
$(‘div :parent’) //选择拥有子元素(包含文本元素)
$(‘div :hidden’) // 选择所有的div为hidden的元素
3.属性过滤器选择
$(‘p[id=p]’) $(‘p[id]’) //选取id为p的p标签 以及 选取有id的p标签
$(‘div[class!=mydiv]’) //选取class不为mydiv的div标签
$(‘div[class^=mydiv]’) //选取class为mydiv开头的div标签
$(‘div[class $=mydiv]’) //选取class以mydiv结束的div标签
$('div[class=mydiv]’)* //选取class有mydiv的div标签
$(‘div[class][title $=‘test’]’) //选取有class且有title属性而且title属性值是以test结尾的div元素
$(’[class=mydiv]’)* //选取所有的class为mydiv的元素
4.子元素过滤器
:first-child
:last-child
:nth-child(even)
:nth-child(odd)
:nth-child(index)
5.表单过滤元素
:enabled
:disable
:checked
:selected
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset