jQuery Study Notes学习笔记 (二)


Posted in Javascript onAugust 04, 2010

1. 使用class与id选择HTML元素

选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素

$('#myDivId')

选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素.
$('.myCssClass')

获取或设置元素的值
var myValue = $('#myDivId').val(); // get the value of an element 
$('#myDivId').val("hello world"); // set the value of an element

选择id中有.和:时,前面添加两个反斜杠
// Does not work 
$("#some:id") 
// Works! 
$("#some\\:id") 
// Does not work 
$("#some.id") 
// Works! 
$("#some\\.id")

或者用如下处理
function jq(myid) { 
return '#' + myid.replace(/(:|\.)/g,'\\$1'); 
} 
$( jq('some.id') )

2. 测试元素

使用is()方法测试是否具有某个class

if ( $('#myDiv').is('.pretty') ) 
$('#myDiv').show();

测试是否隐藏
if ( $('#myDiv').is(':hidden') ) 
$('#myDiv').show();

1.2版本后,可以使用hasClass方法处理
$("div").click(function(){ 
if ( $(this).hasClass("protected") ) 
$(this) 
.animate({ left: -10 }) 
.animate({ left: 10 }) 
.animate({ left: -10 }) 
.animate({ left: 10 }) 
.animate({ left: 0 }); 
});

测试元素是否存在
if ( $('#myDiv').length ) 
$('#myDiv').show();

3.元素禁用与允许
// Disable #x 
$("#x").attr("disabled","disabled"); 
// Enable #x 
$("#x").removeAttr("disabled");

代码:
<select id="x" style="width:200px;"> 
<option>one</option> 
<option>two</option> 
</select> 
<input type="button" value="Disable" onclick="$('#x').attr('disabled','disabled')"/> 
<DIV class=cnblogs_Highlighter><PRE class=brush:html> // This doesn't work 
$(this).find('li a').eq(2).text().replace('foo','bar'); 
// This works 
var $thirdLink = $(this).find('li a').eq(2); 
var linkText = $thirdLink.text().replace('foo','bar'); 
$thirdLink.text(linkText); 
</PRE> 
</DIV> 
<input type="button" value="Enable" onclick="$('#x').removeAttr('disabled')"/>

4.Checkbox选择/取消
// Check #x 
$("#c").attr("checked", "checked"); 
// Uncheck #x 
$("#c").removeAttr("checked");

代码:
<label><input type="checkbox" id="c"/> I'll be checked/unchecked.</label><BR><input type="button" value="Check" onclick='$("#c").attr("checked","checked")'/><BR><input type="button" value="Uncheck" onclick='$("#c").removeAttr("checked")'/><BR>

5.获取Select Opion的value和text
$("select#myselect").val(); 
$("#myselect option:selected").text();

代码:
<select id="myselect"><BR>   <option value="1">Mr</option><BR>   <option value="2">Mrs</option><BR>   <option value="3">Ms</option><BR>   <option value="4">Dr</option><BR>   <option value="5">Prof</option><BR></select><BR><input type="button" value="Get Value" onclick="alert($('#myselect').val())"/><BR><input type="button" value="Get Text Value" onclick="alert($('#myselect option:selected').text())"/>

替换10个项目中第3个项目的文本
// This doesn't work 
$(this).find('li a').eq(2).text().replace('foo','bar'); 
// This works 
var $thirdLink = $(this).find('li a').eq(2); 
var linkText = $thirdLink.text().replace('foo','bar'); 
$thirdLink.text(linkText);
Javascript 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 #Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 #Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 #Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 #Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 #Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 #Javascript
You might like
php实现window平台的checkdnsrr函数
2015/05/27 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
javascript时间函数大全
2014/06/30 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
关于express与koa的使用对比详解
2018/01/25 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
网络技术支持面试题
2013/04/22 面试题
毕业研究生的自我鉴定
2013/11/30 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
世界读书日的活动方案
2014/08/20 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
centos8安装MongoDB的详细过程
2021/10/24 MongoDB
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技