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

一:页面加载完成时,会执行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

 

时间: 2024-09-23 11:54:31

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

跨域取子页面的dom-父页面操作子页面的dom,通过子页面的URL怎么做

问题描述 父页面操作子页面的dom,通过子页面的URL怎么做 appcan.ready(function() { titHeight = $('#header').offset().height; content = $('#reply').offset().height; var url = "http://192.168.1.195/jc6/wfAndroidHtml/knowledge2.html?UserCode=xiaoyujie%24356a192b7913b04c54574d18c

Jquery基础之事件操作详解_jquery

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同. wind

牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作_jquery

只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作.这就需要我们知道如何将jQuery对象和DOM的相互转换的方法. 1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: 复制代码 代码如下: var $input=$("input") jQuery获取的对象在变量前面加上$. &l

jquery对象和DOM对象的任意相互转换_jquery

什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法. 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码.其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法

jquery对象和DOM对象的相互转换详解_jquery

jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = jquery对象: 如果获取的是DOM对象,则定义如下: var varible = DOM对象: 1.jquery对象转成DOM对象: jquery对象不能使用DOM中的方法,但如果对jquery对象所提供的方法不熟悉,或者没有jquery想封装的方法,不得不使用DOM对象,即[index]和ge

CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)_php实例

本文实例总结了CI框架常用经典操作类.分享给大家供大家参考,具体如下: 1. 超级对象中的URI CI_URI类的解析url的相关信息 直接使用$this->uri可以使用它的相关属性 system/core/URI.php文件中 部分常用属性: (1) 分段获取url相关信息 $this->uri->segment(4); //获取url中pathinfo //的第四段的值 入口文件.php/控制器/动作/参数1/参数2/... (2) 通过方法中的形参传参 需要设默认值和顺序要注意

php简单封装了一些常用JS操作_php技巧

在web编程中大家应该会经常用到一些常用js操作,例如 alert(),通常是遇到了再写,受公司的启发,我自己简单写了个类来自动生成这些js,目的就是为了方便,一个小玩意,新手们也许会喜欢^_^ [php] <?php /* *页面:makeJs.class.php *功能:封装常用的JS代码,直接调用,方便操作 *作者:辉老大 *创建时间:2007-01-27 */ class makeJs {      private $jsStartChar = '<scrīpt type="

Jquery对数组的操作技巧

 这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下 1. $.each(array, [callback]) 遍历[常用]    解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略.  each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但

JavaScript常用数组操作实例详解

1.数组的创建  new Array();  new Array(size);  new Array(element0, element1, ..., elementn);  参数 参数 size 是期望的数组元素个数.返回的数组,length 字段将被设为 size 的值.   参数 element ..., elementn 是参数列表.当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值.它的 length 字段也会被设置为参数的个数.   返回值 返回