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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
JavaScript实现音乐播放器
Aug 14 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
vue实现一个炫酷的日历组件
2018/10/08 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
python中的多线程实例教程
2014/08/27 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
django创建简单的页面响应实例教程
2019/09/06 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
师德演讲稿范文
2014/05/06 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android