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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
js实现简单计算器
Nov 22 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
js实现简易计算器功能
Oct 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
example1.php
2006/10/09 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python同时替换多个字符串方法示例
2019/09/17 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
银行演讲稿范文
2014/01/03 职场文书
三万活动总结
2014/04/28 职场文书
工程材料采购方案
2014/05/18 职场文书
法人身份证明书
2014/10/08 职场文书
2014年应急工作总结
2014/12/11 职场文书
财务个人年度总结范文
2015/02/26 职场文书
投标售后服务承诺书
2015/04/29 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL