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 相关文章推荐
accesskey 提交
Jun 26 Javascript
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
js 上传图片预览问题
Dec 06 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
Adodb的十个实例(清晰版)
2006/12/31 PHP
php mysql数据库操作类
2008/06/04 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP函数常用用法小结
2010/02/08 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php中动态调用函数的方法
2015/03/16 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
美工的岗位职责
2013/11/14 职场文书
关于读书的演讲稿
2014/05/07 职场文书
单位委托书怎么写
2014/08/02 职场文书
后备干部推荐材料
2014/12/24 职场文书
小学教师年度个人总结
2015/02/05 职场文书
教导处教学工作总结
2015/08/12 职场文书