码迷,mamicode.com
首页 > Web开发 > 详细

jquery 学习第一课之start

时间:2014-06-25 17:51:56      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:class   blog   java   tar   ext   color   

1.$选取符 ( $ == jQuery )

(1) $("div").addClass("special");选取本页面中的所有<div>元素,然后将这些div加上都加上一个名为“special”的CSS样式。
(2)$("div")选取所有的div元素。
(3)$(“#body”)选取id为body的元素。
(4)$("div #body")选取id为body的<div>。
(5)$("div.contents p") 选取class为contents的<div>所有的下层<p>元素。
(6)$("div>div")选取被<div>包裹的下一层<div>。
(7)$("div:has(div)") 选取至少包住一个子<div>的<div>元素。

  

2. jquery能方便地对DOM 进行操作,比如添加、修改或删除节点,为节点添加事件处理等。 

 

(1)选取所有包含target属性的<a>,并且在其节点下添加一段文字:

$(“a[target]".append(“open in a new window”))

 (2)选取id为body的元素,并且修改两个CSS属性: 

$("#body").CSS({ border:"1px solid green", height:"40px" });

(3)在提交表单时,判断username字段是否为空,如果为空,则显示help区块内的文字。

$("form").submit(function(){ if($("input #username").val()=="") $("span.help").show(); });

(4)当用户点击id为open的链接时,显示id为menu的区块,并返回false.

$("a # open").click(function(){ $("menu").show(); return false; });

(5)将id为menu的区块以动态下拉效果显示出来。

$("#menu").slideDown("fast");

(6)将所有的<div>渐变为300px宽,文字与边界20px宽.

$("div").animate({ width:‘300px‘, padding:‘20px‘ },‘slow‘);

(7)具有动态效果的回调函数,将所有的<div>以0.5s的动态效果隐藏之后,再以0.5s的动态效果显示。其中$(this)是方法方法调用方的元素。 

$("div").hide(500,function({ $(this).show(500); }));

(8) 获取sample.html 并且找出其中所有<div>下层的<h1>,将<h1>中的内容写入id为body的元素中。

$("#body").load("sample.html div>h1");

(9)通过getJSON获得JSON格式的数据,并通过回调方法处理这些数据:

$.getJSON("test.json",function(data){ for(var idx in data) $("#menu").append("<li>"+data[idx]+"</li>"); });

 

3.链式写法

x选取页面中所有的<div>,然后隐藏它们,修改文字为蓝色并将<div>以下拉的效果显示出来,那么原有的选取操作:

$("div").hide();
$("div").CSS("color","blue");
$("div").slideDown();

用一行代码来替换就是:

$("div").hide().CSS("color","blue").slideDown();

 需要注意的代码:

$("ul.open")   //找出文件内所有class为open的<ul>
.children           //过滤出下一层所有的<li>
.addClass(“open”)     //对这些<li>新增一个CLASS
.end()               //再回到前一次的搜索结果,也就是所有的<ul>
.find("a")          //找出其中所有的<a>
.click(function(){     //对<a>新增事件处理
$(this).next().toggle();
return false;
})
.end();     //回到前一次的搜索结果

 

4. Document ready事件

jQuery的document ready事件模拟DOM Content Loaded 事件。

DOM Content Loaded 事件和window.onload 事件的区别在于,DOM Content Loaded 事件开始得更早一些。

并且,window.onload 并没有办法多次指定不同的方法来执行,最后指定的方法回覆盖之前的方法。比如:

window.onload = function(){
alert("hello world!");
};
window.onload = function(){
alert("您好");
};

如果使用jQuery就可以写成:

$(document).ready(function(){
alert(‘hello world!‘);
});
$(document).ready(function(){
alert(‘您好!‘);
});

 

reference:

 1.《巧用jquey》 吴超 张帅著。

 

jquery 学习第一课之start,布布扣,bubuko.com

jquery 学习第一课之start

标签:class   blog   java   tar   ext   color   

原文地址:http://www.cnblogs.com/haore147/p/3805963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!