栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jQuery Study Notes学习笔记 (二)

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jQuery Study Notes学习笔记 (二)

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");

代码:
复制代码 代码如下:


 // 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);




4.Checkbox选择/取消
复制代码 代码如下:
// Check #x
$("#c").attr("checked", "checked");
// Uncheck #x
$("#c").removeAttr("checked");

代码:
复制代码 代码如下:





5.获取Select Opion的value和text
复制代码 代码如下:
$("select#myselect").val();
$("#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);
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/115512.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号