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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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与XML的PDF文档生成技术
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP检测用户语言的方法
2015/06/15 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
php DES加密算法实例分析
2019/09/18 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
详解jQuery事件
2017/01/13 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
这样回答继承可能面试官更满意
2019/12/10 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
python之Socket网络编程详解
2016/09/29 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python实现自动发送邮件
2018/06/20 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
写给女生的道歉信
2014/01/14 职场文书
推普周活动总结
2014/08/28 职场文书
自查自纠工作总结
2014/10/15 职场文书
贷款担保书
2015/01/20 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书