jquery的常用操作(操作html页面的Dom对象的元素)
一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法)
//第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function() { //执行体 });
二:用jquery获取dom对象,判断该对象是否有内容的两种方法(有返回true,没有返回false)
jqObj.text().trim() var jqObj = $(this); if(jqObj.text().trim()){ //trim()方法是去空格,$.trim()函数删除提供字符串的所有换行符,空格(包括非中断空格),开始和结束tab。如果这些空白字符在字符串中间发生时,它们将被保留。 jqObj.hide(); } //判断获取的dom元素对象下是否有某个元素 var jqObj = $(this); if(!jqObj.has('li').length){ jqObj.hide(); }
三事件机制
1 事件机制 2 我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。 3 代码 4 $(document).ready(function(){ 5 $("#clear").click( 6 function(){ 7 alert("i am about to clear the table"); 8 } 9 ); 10 $("form[12]").submit(validate); 11 }); 12 function validate(){ 13 //do some form validation 14 }
三代替body标签的onload事件
代替body标签的onload 这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码: 代码 $(document).ready(function(){ alert("hello"); });(1) <body onload="alert('hello');">(2) 上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。 基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。 不管怎么说,这个惯例可以分离javascrīpt与HTML。推荐使用。 别误导,上面两段代码不是等价的。 <body onload="alert('hello');">这里的alert('hello');要等到页面全部加载完毕才执行,注意是全部加载,包括dom,图片等其它资源。 而$(document).ready(function(){ alert("hello"); });(1) 当dom加载完就可以执行了。