1.从$开始
对于熟悉prototype的朋友,$符号应该很熟悉,
prototype:
var
element
=
$(’eleId’)
jquery:
var
element
=
$(’#eleId’)
DOM:
var
element
=
document.getElementById(’eleId’)
$(’#j1′).html()
<
div id
=
“
j1
“
>
Hello, jQuery
!content>
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
以上三种选择方式是等价的,相比prototype来说jquery多了个#号
例:
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2.通过xpath+css来获取你想要的…
1).
在这段例子中我们需要用到的 HTML代码
<
div
class
=”contentToChange”
>
<
p
class
=”alert”
>
警告!警告!警告!警告!
p>
<p class=”firstParagraph”>我是第一段p>
<p class=”secondParagraph”>第二段,哎,火箭输球了
0比33!火箭替补钉上耻辱柱 <em>姚麦em>身边再无可用之人频繁失误成姚明致命毒药 板凳消失是火箭落后主因p>
div>
1).
在这段例子中我们需要用到的 HTML代码
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
jquery代码:
//
获取div.contentToChange下p标记数组长度
alert($(’div.contentToChange p’).size())
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//
通过调整高度来显示/隐藏所有匹配的元素,这里的匹配元素是p.firstParagraph
$(’div.contentToChange p.firstParagraph’).slideToggle(’slow’);
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//
找到匹配所有div.contentToChange下所有css不为alert的p元素,并在其后面添加文字
$(’div.contentToChange p:not(.alert)’).append(’<strong class=“addText“>这是新加的文字strong>‘);
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//找到所有为strong元素且css为addText的元素,然后删除
$(’strong.addText’).remove();
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//找到P标记下css为secondParagraph的元素,然后渐隐
$(’div.contentToChange p.secondParagraph’).hide(’slow’);
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//找到div.contentToChange下所有em元素,然后通过jquery中的css方法改变它们的颜色和字体
$(’div.contentToChange em’).css({color:“#993300“,fontWeight:“bold“});
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//添加css样式
$(’div.contentToChange p.secondParagraph’).addClass(’new‘)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//删除css样式
$(’div.contentToChange p.secondParagraph’).removeClass(’new‘);
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2).
在这段例子中我们需要用到的HTML代码:
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
jquery代码
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
注:
$(’#jqdt ol.groof > strong’) 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $(’#jqdt ol.groof strong’) 则访问所有下级子节点中的strong元素,包括子节点的子节点等。
$(’#jqdt ol.groof > strong’) 其中的>代表只访问下一级子节点中包含strong的元素,
如果改为 $(’#jqdt ol.groof strong’) 则访问所有下级子节点中的strong元素,包括子节点的子节点等。
3).
常用的自定义选择器
:eq(0) 选择索引等于0也就是第一个元素
:gt(4) 选择所有索引大于4的元素
:lt(4) 选择所有索引小于4的元素
:first 等价于 :eq(0)
:last 选择最后一个元素
:parent 选择所有含有子节点的元素 (including text).
:contains(’test’) 选择含有指定文本的元素
:visible 选择所有可见元素(包含:display:block|inline,或者visibility为visible的元素,但是不包括表单元素(type hidden)
:hidden 选择所有隐藏元素(包含:display:none,或者visibility为hidden的元素,包括表单元素(type hidden)
$(’p:first’).css(’fontWeight’,'bold’)
$(’div:hidden’).show();
$(
“
div:contains(’test’)
“
).hide();
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
$(’input[@name
=
bar]’).val()
//
获取名字为bar的input表单的值
$(’select[@name
=
slt]’).val()
//
获取名为slt的下拉菜单的选择中值
$(’input[@type
=
radio][@checked]’)
//
获取所有被选中的radio表单
例:
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
表单选择器
:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type=”text”).
:password Selects all password fields (type=”password”).
:radio Selects all radio fields (type=”radio”).
:checkbox Selects all checkbox fields (type=”checkbox”).
:submit Selects all submit buttons (type=”submit”).
:image Selects all form images (type=”image”).
:reset Selects all reset buttons (type=”reset”).
:button Selects all other buttons (type=”button”).
$(’myForm:input’)
$(’input:radio’,myForm)
//
:radio等价于[@type=radio]
例:
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![点击图片可在新窗口打开](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)