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 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
微信小程序定义和调用全局变量globalData的实现
Nov 01 Javascript
Vue实现购物车基本功能
Nov 08 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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来处理多个提交任务
2008/05/08 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
ipad上运行python的方法步骤
2019/10/12 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python猜数字算法题详解
2020/03/01 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
简述 Python 的类和对象
2020/08/21 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
Android面试题及答案
2015/09/04 面试题
运动会通讯稿400字
2014/01/28 职场文书
法定代表人授权委托书
2014/09/19 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
网络舆情信息简报
2015/07/21 职场文书
入党后的感想
2015/08/10 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android