脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery 学习笔记

jQuery Study Notes学习笔记 (二)

 更新时间：2010年08月04日 02:20:50   作者：  
jquery简单选择器的使用方法。jquery中最基本的东西了。
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>&nbsp;&nbsp; <option value="1">Mr</option><BR>&nbsp;&nbsp; <option value="2">Mrs</option><BR>&nbsp;&nbsp; <option value="3">Ms</option><BR>&nbsp;&nbsp; <option value="4">Dr</option><BR>&nbsp;&nbsp; <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);
您可能感兴趣的文章:

相关文章

  • jQuery常用数据处理方法小结

    jQuery常用数据处理方法小结

    这篇文章主要介绍了jQuery常用数据处理方法,实例总结了trim、param、isArray、isFunction、each等jQuery常用的数据处理方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery实现垂直半透明手风琴特效代码分享

    jQuery实现垂直半透明手风琴特效代码分享

    这是一款jquery hover抽屉式导航图片展开收缩切换特效代码，用户还可以自定义对应幻灯片的标题与文字说明，是一款非常实用的幻灯片特效源码。
    2015-08-08
  • jQuery四种选择器使用及示例

    jQuery四种选择器使用及示例

    本文给大家汇总介绍了jQuery的四种选择器的使用方法以及示例，非常的简单实用，希望对大家学习jquery能够有所帮助。
    2016-06-06
  • jquery彩色投票进度条简单实例演示

    jquery彩色投票进度条简单实例演示

    这篇文章向大家推荐了一个jquery彩色投票进度条简单实例演示，详细介绍了如何制作进度条的步骤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 3种不同的ContextMenu右键菜单实现代码

    3种不同的ContextMenu右键菜单实现代码

    本文给大家分享3种不同的ContextMenu右键菜单实现代码的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • jquery树形菜单效果的简单实例

    jquery树形菜单效果的简单实例

    下面小编就为大家带来一篇jquery树形菜单效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JQuery解析HTML、JSON和XML实例详解

    JQuery解析HTML、JSON和XML实例详解

    JQuery具有强大的解析数据的能力，本文详细介绍HTML、JSON和XML格式的文件的数据如何解析
    2014-03-03
  • 使用jQuery动态加载js脚本文件的方法

    使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术。这方面的主题在网上已经讨论了不少，我也经常会在一些个人项目上使用RequireJS和Dojo加载js
    2014-04-04
  • jquery中绑定事件的异同

    jquery中绑定事件的异同

    本文主要介绍了jquery中bind(),live(),delegate(),on()绑定事件的不同点和相同点，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • jquery实现超简洁的TAB选项卡效果代码

    jquery实现超简洁的TAB选项卡效果代码

    这篇文章主要介绍了jquery实现超简洁的TAB选项卡效果代码,涉及jquery通过鼠标click事件结合链式操作动态操作tab选项卡的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论