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 相关文章推荐
详解AngularJS中的表达式使用
Jun 16 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
Yii使用技巧大汇总
2015/12/29 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
python使用matplotlib画饼状图
2018/09/25 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
住宅使用说明书
2014/05/09 职场文书
某某同志考察材料
2014/05/28 职场文书
学校献爱心活动总结
2014/07/08 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
超市督导岗位职责
2015/04/10 职场文书
质量承诺书格式范文
2015/04/28 职场文书
教师思想工作总结2015
2015/05/13 职场文书
react 路由Link配置详解
2021/11/11 Javascript
灵能百分百第三季什么时候来?
2022/03/15 日漫
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA