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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
Vue父子传递实例讲解
Feb 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
PHP 遍历文件实现代码
2011/05/04 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python中实现字符串翻转的方法
2018/07/11 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python实现Restful API的例子
2019/08/31 Python
python实现复制大量文件功能
2019/08/31 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python partial函数原理及用法解析
2019/12/11 Python
keras之权重初始化方式
2020/05/21 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
安全教育演讲稿
2014/05/09 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
会计师事务所实习证明
2014/11/16 职场文书
张思德观后感
2015/06/09 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers