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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 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循环获取GET和POST值的代码
2008/04/09 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP 面向对象详解
2012/09/13 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
javascript 函数式编程
2007/08/16 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python中的下划线详解
2015/06/24 Python
python去除字符串中的换行符
2017/10/11 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python中偏函数用法示例
2018/06/07 Python
python实现多层感知器
2019/01/18 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python实现证件照换底功能
2019/08/20 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
小学生国庆节演讲稿
2014/09/05 职场文书
会议开幕词
2015/01/28 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫