jquery 学习第一课之start

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

1 2 3 4 5 6 7

（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>,并且在其节点下添加一段文字：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　

3.链式写法

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

1 2 3

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

用一行代码来替换就是：

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

 需要注意的代码：

1 2 3 4 5 6 7 8 9 10

$( "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 并没有办法多次指定不同的方法来执行，最后指定的方法回覆盖之前的方法。比如：

1 2 3 4 5 6

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

如果使用jQuery就可以写成：

1 2 3 4 5 6

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

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