jquery的常用操作(操作html页面的Dom对象的元素)

简介: 一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function()...

一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法)

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

   // 执行体

});



//第二种写法

$(function() {

    //执行体
}); 
View Code

二:用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();
} 
View Code

 三事件机制

 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事件

代替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

 

相关文章
|
3月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
53 10
|
10天前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
29 11
|
2月前
|
JavaScript
jQuery+css3制作精美的2024圣诞节倒计时页面
jQuery+css3制作精美的2024圣诞节倒计时页面动画
28 0
jQuery+css3制作精美的2024圣诞节倒计时页面
|
2月前
|
Web App开发 JavaScript iOS开发
基于jquery开源的页面内模拟滚动条特效插件scrollbar
abcrollBar是一个基于jquery运行的开源滚动条特效插件,体积小巧使用简单的滚动条小插件,它可以通过鼠标中轴滑动页面内的模拟滚动条,或鼠标拖动滚动条查看滚动框架里的内容。支持自定义滚动条的样式,滚动条可选择横或竖呈现,默认也可选择显示或隐藏滚动条。
37 0
|
3月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
38 1
|
4月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
27 2
|
4月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
127 0
react字符串转为dom标签,类似于Vue中的v-html
|
4月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
28 2
|
3月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
43 0
|
4月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
31 6