jquery选择器的选择使用及性能介绍


Posted in Javascript onJanuary 16, 2013

在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了。

从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上。

前言:对于写在<script></script>中的代码,一般在JS环境,我们一般把代码写在window.onload=function(){...}代码块里,这个意思是说,当页面加载完成后,再执行JS代码块,而对于JQ来说,它也有类似的方法$(function(){...});我们把代码段写在这里面。有时如果不想那样写(这样写一般把JS代码放在了<head></head>标记里,但这样会影响页面加载的速度),可以把JS代码写在<body></body>的最底下。
ID选择器

alert($("#name").val()); //输出ID为name的input元素的值

类选择器
alert($(".nameclass").val()); //输出具有css名为nameclass的input元素的值

特殊选择器
alert($("input[type=text][name=name]").val()) //输出类型为text,name为name的input元素的值

//选中指定的select元素: 
function chekStatus(o) { 
$('#OrderStatus').find('option[value=' + o + ']').attr('selected', true); 
$('#search_btn').trigger(); 
} 
//全选 
$('#SelectAll').click(function() { 
if (this.checked) { 
$('.forShop:not(:checked)').each(function() { 
this.click(); 
}); 
} 
else { 
$('.forShop:checked').each(function() { 
this.click(); 
}); 
} 
}); 
//是否有选中项 
$('#delSelectProduct').click(function() { 
if ($('.protuctitem:checked').size() == 0) { 
alert('请选择宝贝'); 
return false; 
} 
//根据索引,选中指定的option,并为option添加CSS样式 
function chekStatus(o) { 
$('#OrderStatus').find('option')[o].selected = true; 
$($('#tabs').find('dd').removeClass('cur')[o]).addClass('cur'); 
$('#search_btn').trigger('click'); 
} 
//为表格的行加隔行变色特效,单击行后,再变色 
var $trs = $("#baike_div>table>tbody>tr"); //选择所有行 
$trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式 
$trs.filter(":even").addClass("even"); //给偶数行添加odd样式

下面有一些选择器的技巧,需要我们去了解
//(1)通配符: 
$("input[id^='code']"); //id属性以code开始的所有input标签 
$("input[id$='code']"); //id属性以code结束的所有input标签 
$("input[id*='code']"); //id属性包含code的所有input标签 
//(2)根据索引选择 
$("tbody tr:even"); //选择索引为偶数的所有tr标签 
$("tbody tr:odd"); //选择索引为奇数的所有tr标签 
//(3)获得jqueryObj下一级节点的input个数 
jqueryObj.children("input").length; 
//(4)获得class为main的标签的子节点下所有<a>标签 
$(".main > a"); 
//(5)选择紧邻标签 
jqueryObj.next("div"); //获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有 
// (6)根据索引选择 
$("div").eq(0); //获取第一个div标签 
//筛选器 
$("#code input:not([id^='code'])"); //id为code标签内不包含id以code开始的所有input标签

面我列出了项目中经常用到了一些选择器,事实上只要理解了它们的直正含义,我们每个人都可以写了特定的JQ代码,当然代码的效率是否高效还需要我们自己进一步的努力,
总之实现基本的需求的功能,只是第一步!

小知识:$("#...")这些选择器的返回值其时是一个JQ对象,而它可以直接操作JQ的内部事件,如click,mouseover等事件

好了,总算是把JQ选择器这块写完了,谢谢您的阅读!

Javascript 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 #Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 #Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 #Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 #Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 #Javascript
JQuery验证工具类搜集整理
Jan 16 #Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 #Javascript
You might like
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python编程中的异常处理教程
2015/08/21 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
护理学中专毕业生求职信
2013/11/11 职场文书
广告学专业推荐信范文
2013/11/23 职场文书