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之典型高阶函数应用介绍
Jan 10 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
详解CocosCreator项目结构机制
Apr 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
一个好用的分页函数
2006/11/16 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
JS获取农历日期具体实例
2013/11/14 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
python基础教程之缩进介绍
2014/08/29 Python
python中PIL安装简单教程
2016/04/21 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python控制Firefox方法总结
2019/06/03 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
ORACLE第二个十问
2013/12/14 面试题
客户代表自我评价范例
2013/09/24 职场文书
好的自荐信包括什么内容
2013/11/07 职场文书
会计工作心得体会
2014/01/13 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python