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 Mobile入门—多页面切换示例学习
Jan 08 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
Vue 过渡实现轮播图效果
Mar 27 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
网友原创的PHP模板类代码
2008/09/07 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
Python入门学习指南分享
2018/04/11 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python实现爬山算法的思路详解
2019/04/09 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python实现宿舍管理系统
2019/11/22 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
应届生.NET方向面试题
2015/05/23 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
岗位职责范本
2013/11/23 职场文书
老公给老婆的保证书
2014/04/28 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
平安建设工作方案
2014/06/02 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
推荐信范文大全
2015/03/27 职场文书
大学生暑假实习总结
2015/07/13 职场文书