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 相关文章推荐
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
移动端js触摸事件详解
Sep 18 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
vue键盘事件点击事件加native操作
Jul 27 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
javascript动画浅析
2012/08/30 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
python多重继承新算法C3介绍
2014/09/28 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
浅析Python中的join()方法的使用
2015/05/19 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
python处理二进制数据的方法
2015/06/03 Python
python目录与文件名操作例子
2016/08/28 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python3获取当前目录的实现方法
2019/07/29 Python
python deque模块简单使用代码实例
2020/03/12 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Python编写万花尺图案实例
2021/01/03 Python
电子商务网站的创业计划书
2014/01/05 职场文书
遗产继承公证书
2014/04/09 职场文书
员工培训协议书
2014/09/15 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
2015感人爱情寄语
2015/02/26 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Python基础之变量的相关知识总结
2021/06/23 Python