jquery的经常使用操做（操做html页面的Dom对象的元素）

时间 2019-12-01

标签 jquery 经常使用 html 页面 dom 对象元素栏目 JQuery 繁體版

原文原文链接

一：页面加载完成时，会执行jquery的方法（不须要等待图片加载完成，只要dom结构加载完成，就执行该方法）html

//第一种写法：
$(document).ready(function() {

   // 执行体

});



//第二种写法

$(function() {

    //执行体
});

View Code

二：用jquery获取dom对象，判断该对象是否有内容的两种方法（有返回true，没有返回false）java

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();
}

View Code

三事件机制jquery

 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 　　}

View Code

三代替body标签的onload事件dom

代替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加载完就能够执行了。

View Code