jquery 学习第一课之start-白红宇

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(
'您好!'
);
});
        
      

　本文转自二郎三郎博客园博客，原文链接：http://www.cnblogs.com/haore147/p/3805963.html，如需转载请自行联系原作者