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的一个简单的脚本验证插件
Apr 05 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
javascript中typeof的使用示例
2013/12/19 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
详解tween.js的使用教程
2017/09/14 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vue.js数据绑定操作详解
2018/04/23 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
学生会主席就职演讲稿
2014/01/14 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
婚纱摄影师求职信范文
2014/04/17 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
学校教研活动总结
2014/07/02 职场文书
个人授权委托书
2014/09/15 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
600字作文之感受大自然
2019/11/27 职场文书