您的位置：首页 > Web前端 > JQuery

jQuery基础

2012-06-25 15:40 211 查看

用少量代码实现丰富的功能

利用jQuery，1行代码可以实现10行代码的功能。

var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();


这条jQuery语句真正的威力来自于选择器。

不唐突的JavaScript

示例代码使得行为和结构混合在一起。

行为和结构分离

不唐突的JavaScript认为，任何存在于html页面<body>内部的JavaScript代码都是错误的，这些错误代码或者存在于html元素特性中，或者存在于页面<body>脚本块中。

分离脚本

JQuery基础

jQuery的核心是从html页面上获取元素并对其操作。jQuery的选择器基于CSS选择器的语法。

jQuery包装器

jQuery使用与CSS相同的选择器，而且进一步支持CSS没有的选择器。

$()函数返回特殊的javascript对象，它包含与选择器相匹配的DOM元素数组，其元素按照在文档中的顺序排列。这个对象拥有大量预定义方法，用于已收集的元素集合。在编程用语中，这种构造方法称为包装器。

$('div.notLongForThisWorld').hide()


jQuery包装器方法有一个特点，当任务执行完毕后，会返回相同的一组元素，以便为另一个操作做准备。这些jQuery的作用链可以无限延续。

$('div.notLongForThisWorld').hide().addClass('removed')


如果有必要的话，也可以把它当作普通的元素数组来对待。

实用函数

$的另一个职责是作为一些通用实用函数集的命名空间前缀。

var trimmed = $.trim(somestring)


文档就绪处理程序

$(function () {
$('div.notLongForThisWorld').hide()
});


通过传递一个函数给$()，我们通知浏览器直到DOM被完全加载后再执行此段代码。并且可以在一个html文档中多次调用此函数，浏览器会按照他们在页面中声明的顺序依次调用。

创建DOM元素

$("<p>Hi there!</p>").insertAfter("#followMe")


以上代码创建了一个段落，接着将此段落跟随在id为followMe的元素后面。

扩展jQuery

$.fn.disable = function () {
return this.each(function(){
if (this.disabled != null) this.disabled = true
})
}


jQuery与其他库共存

使用jQuery.noConflict()就可以保留$标识符给其他库使用了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航