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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Vue的Options用法说明
2020/08/14 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
python中的格式化输出用法总结
2016/07/28 Python
深入理解Python中的内置常量
2017/05/20 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
浅析python内置模块collections
2019/11/15 Python
Django多个app urls配置代码实例
2020/11/26 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
会计实习期自我鉴定
2013/10/06 职场文书
韩国商务邀请函
2014/01/14 职场文书
商务邀请函范文
2014/01/14 职场文书
向领导表决心的话
2014/03/11 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
产品设计开发计划书
2014/05/07 职场文书
水利水电专业自荐信
2014/07/08 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书