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 相关文章推荐
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
用Webpack构建Vue项目的实践
Nov 07 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
Vue 实现登录界面验证码功能
Jan 03 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
如何设置mysql允许外网访问
2013/06/04 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
javascript 日期时间 转换的方法
2013/02/21 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python发送邮件脚本
2018/05/22 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
迪奥官网:Dior.com
2018/12/04 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
生产车间班组长岗位职责
2014/01/06 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
办公用房租赁协议书
2014/11/29 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
python实现腾讯滑块验证码识别
2021/04/27 Python