write less, do more
,这是打在jquery一直帮助开发者做的事情。jquery使得开发者不用再书写js DOM api 提供的api方法,使得代码变得精简。同时jquery提供的API能够兼容众多的浏览器,减轻了开发者对于浏览器适配方面的处理。并且提供了链式操作,以及方法的重载等封装。这一切使得jquery在经历了十几年的考验后,依旧存活下来。
本文将从以下几点列举jquery的使用,帮助读者能够了解部分jquery的使用方法。
获取元素
$()
选择表达式可以是CSS选择器
也可以是jQuery特有的表达式
如:
$("div.myClass")
$("div:first")
链式操作
选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来,比如:
$('div').find('h3').eq(2).html('Hello');
取值和赋值
使用同一个函数来完成getter和setter操作
$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值
创建元素
如果一个字符串做为一个参数传递个$(), jQuery 检查这个属性是否看上去像HTML (也就是, <tag ... > 之类的元素在这个字符串中)。如果没有, 这个字符串将被解释为选择器, 作为解析上下文。 但是如果该字符串是一个 HTML 代码片断,那么jQuery 就会根据它尝试创建一个新的 DOM 元素。然后jQuery对象创建并返回引用的这些元素。
$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" );
属性修改
.attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值, 我们需要依靠jQuery的 .each()或者.map()方法循环。
// 获取
var title = $("em").attr("title");
// 设置
$('#greatphoto').attr('alt', 'Beijing Brush Seller');