本文摘自PHP中文网,作者coldplay.xixi,侵删。

相关免费学习推荐:javascript(视频)
jQuery常用选择器和过滤选择器
使用方法
下载Jquery文件库,保存在站点js文件夹中,使用script标签引入,放在head标签内
window.οnlοad=function()可简化为$(function)
window.οnlοad=function(){ … 页面加载事件 }
$(function){ …页面加载事件 }
下面的是上面的简化方式
jQuery的选择器
- 基本选择器
1 2 | $( "#id" ) :id选择器
$( "p" ) :p选择器 $( ".class" ) :类选择器 $( ".class,.class2,#id" ) :组合选择器
|
- 层次选择器
1 | $( "#id>.class" ) :子元素选择器$( "#id .class" ) :后代选择器$( "#id+.class" ) :紧邻下一个元素选择器$( "#id~.class" ) :兄弟元素选择器
|
- 表单选择器
jQuery的过滤器
过滤器使用 :开头
- 基本过滤选择器
1 2 3 4 5 6 | $( "Ii:first" ) :第一个li
$( "li:last" ) :最后一个li
$( "li:even" ) :挑选 下标为偶数的li
$( "li:odd" ) :挑选 下标为奇数的li
$( "Ii:eq(4)" ) :下标等 于4的li(第五个li元素)$( "Ii:gt(2)" ) :下标大于 2的li
$( "li:lt(2)" ) :下标小于 2的li$( "Ii:not(#runoob)" ) :挑选除id= "runoob" 以外的所有li$( "Ii:header" ) :所有标题元素$( "Ii:animated" ) :正在执行动画效果的元素
|
- 内容过滤选择器
1 | $( "li:contains(text)" ) :含有文本内容为text的元素$( "li::empty" ):获取不包含后代元素或者文本的空元素$( "li::has(selector)" ):获取含有后代元素为selector的元素$( "li::parent" ):获取含有后代元素或者文本的非空元素
|
- 可见性过滤器
1 | $( "li:hidden" ) :隐藏li元素$( "li:visible" ) :显示li元素
|
- 属性过滤选择器
1 | $( "li[title]" ) :获取所有属性包括title的li元素$( "p[id^='qq']" ) :id属性值以qq开头的p元素$( "p[id*='bb'" ) :id属性值包含bb的p元素$( "li[title=text2]" ) :li属性值等于text2的元素$( "p[id!='aa'" ) :id属性值不等于aa的p元素$( "p[id$='z']" ) :id 属性值以zz结尾的p$( "input[id][name$='man']" ):多属性选过滤,同时满足两个属性的条件的元素
|
- 表单对象属性过滤选择器
1 | $( "input:enabled" ) :选取可用的表单元素$( "input:disabled" ) :选取不可用的表单元素$( "input:checked" ) :选取被选中是input元素$( "input:selected" ) :选取被选中的option元素
|
jQuery操作DOM
生成jquery对象
获取或设置元素内部的HTML代码
1 2 | var obj=$( "#content" );
obj.html( "jQuery对象" )
|
DOM对象转换成jQuery对象
1 2 3 4 | <script type= "text/javascript" >
var $text =$(document.getElementsByTagName( "li" ));
alert( $text .eq(0).html());
alert( $text .eq(1).html());
|
jQuery使用DOM操作元素
单个属性语法 jQuery对象.css(name,value):name为样式名称,value为样式值 同时设置多个属性语法
jQuery对象.css{(name:value,name:value,name:value…)}:name为样式名称,value为样式值
jQuery使用DOM操作元素增加类样式,删除类样式,切换不同类样式
jQuery对象.addaClass(class)
jQuery对象.removeaClass(class)
jQuery对象.toggleClass(class)
jQuery使用DOM操作元素内容和值的操作
jQuery对象.html():用于获取第一个匹配元素的HTML内容或文本内容
jQuery对象.html(content):用于设置所有匹配元素的HTML内容或文本内容
jQuery对象.text():用于获取所有匹配元素的文本内容
jQuery对象.text(content):用于设置所有匹配元素的文本内容
jQuery对象.val():用于获取或设置元素的值
jQuery对象.attr(name):用于获取元素的属性值
jQuery对象.attr(name,value):用于设置元素的属性值
jQuery对象.attr(name,function(index)):绑定function函数,通过该函数返回值作为元素的属性值
jQuery对象.removeAttr(name):用于删除元素的属性值
jQuery使用DOM操作节点
$(html):创建html的jQuery对象
1 | eg:$( "<a href='http://www.baidu.com'></a>" ).appendTo(p)
|
a.append(b):a里添加b
1 | eg:$( "ul" ).append( "li" ):a里添加b
|
a.appendTo(b):a添加到b
1 | eg: $li .appendTo( "ul" ):a添加到b
|
a.prepend(b):将b前置插入到a中
1 | eg: $( "ul" ).prependTo( "li" )
|
a.prependTo(b):将a前置插入到b中
a.after(b):将b插入到a之后
a.insertAfter(b):将a插入到b之后
a.before(b):将b插入到a之前
a.insertBefore(b):将a插入到b之前
1 | eg: $p .insertBefore( "ul" )
|
a.replaceWith(b):把a替换为b
1 | eg: $( "li" ).replaceWith( "ol" )
|
a.replaceAll(b):用b替换a
1 | eg: $( "ol" ).replaceAll( "li" )
|
a.clon(ture):把a复制
a.remove(a):删除a
1 2 | eg: $( "ul li" ).remove()
$( "ul li" ).remove( "li li:last" )
|
jQuery对象.each(callback):遍历元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html>
<head>
<meta charset= "utf-8" />
<title></title>
<script src= "js/jquery-3.4.1.min.js" type= "text/javascript" charset= "utf-8" ></script>
<script type- "text/javascript" >
$( function (){
$( "input[type='button']" ). click( function (){
$( "img" ).each( function (index, element){
this.style.border= "2px solid red" ;
this.title= "第" +(index+1)+ "幅风景画" ;
});
});
});
</script></head><body>
<p>
<img src= ".../img/img1.jpg" />
<img src=".../img/img2.jpg'/>
</p>
<input type= "button" value= "添加边框" /></body></body> </html>
|
动画与特效
- show():显示
- hide():隐藏
- toggle():切换
- fadeIn():淡入
- fadeOut():淡出
- fadeToggle():切换淡出淡入
- fadeTo():指定淡入淡出透明度值
- slideDown():滑入
- slideUp():滑出
- slideToggle():切换滑入滑出
- animate():自定义动画
- stop():停止
移动位置代码如图:
自定义动画代码如图
以上就是JavaScript知识点总结之 jQuery常用选择器和过滤选择器的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jquery怎么实现淡入淡出效果
vue组件内部实现一个双向数据绑定的代码示例
通过实例了解javascript数组方法slice()的使用方法
javascript中的引用类型是什么
javascript怎么求长方形周长
一纸搞懂js系列(1)之编译原理,作用域,作用域链,变量提升,暂时性死区
javascript数组如何求和
深入了解ajax(图文详解)
javascript怎么控制页面跳转
vue响应式原理及依赖收集的介绍 (附代码)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript知识点总结之 jQuery常用选择器和过滤选择器