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();
}
三事件机制
事件机制
我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。
代码
$(document).ready(function(){
$("#clear").click(
function(){
alert("i am about to clear the table");
}
);
$("form[12]").submit(validate);
});
function validate(){
//do some form validation
}
三代替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加载完就可以执行了。
jquery的常用操作(操作html页面的Dom对象的元素)的更多相关文章
- js操作控制iframe页面的dom元素
1.代码1 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 获取父页面的dom元素
$("li.jericho_tabs", window.top.document); 上面的代码意思是获取父页面的li元素,class为jericho_tabs的所有元素.
- [jQuery学习系列一]1-选择器与DOM对象
前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://w ...
- jquery的常用ajax操作
$.ajax() 定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() ...
- jQuery动态给下拉列表添加一个选项(创建DOM对象)
使用的函数:
- JavaScript的DOM对象和jQuery对象的对比
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery基础之事件操作
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事 ...
- jQuery学习笔记(3)-操作jQuery包装集的函数
一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
随机推荐
- 【转】ArcGIS API for Silverlight/WPF 2.1学习笔记(一)
源自:http://blog.163.com/zwx_gis/blog/static/32434435201122193611576/ (主页:http://blog.163.com/zwx_gis/ ...
- 5-13 Rspec实际; validates处理Errors, TDD, 单元测试和验收测试,capybara
validates处理验证错误:详见ActiveModel::Errors文档 一,errors ActiveModel::Errors的实例包含所有的❌.每个错误:key是每个属性的name, va ...
- 4-14-17 JavaScript知识点总结(包括JOSN, ajax等,来源w3c)
JavaScript 也称 ECMAScript as "JavaScript" It is designed to run as a scripting language in ...
- 4-1 contag_tag:返回HTMLtag.
jquery已经过时,做一遍,了解其他知识点. contag_tag(name, content_or_options_with_block = nil, options = nil, &bl ...
- Python下尝试实现图片的高斯模糊化
资源下载 #本文PDF版下载Python下尝试实现图片的高斯模糊化#本文代码下载高斯模糊代码下载 高斯模糊是什么? (先来看一下维基百科对它的定义) 高斯模糊是模糊图像的结果.它是一种广泛使用的图形软 ...
- python-day29--socket
一 .客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 二. 三. 1.互联网协议就相当于计算机界的英语 2.数据传输的过程中包头一定要是固定的长度 四.socket层的位置 so ...
- UVA-10020 Minimal coverage(贪心)
题目大意:在x轴上,给一些区间,求出能把[0,m]完全覆盖的最少区间个数及该情形下的各个区间. 题目分析:简单的区间覆盖问题.可以按这样一种策略进行下去:在所有区间起点.长度有序的前提下,对于当前起点 ...
- create rootfs.img using loop device
reference: https://www.thegeekdiary.com/how-to-create-virtual-block-device-loop-device-filesystem-in ...
- 玩转控件:重绘DEVEXPRESS中DateEdit控件 —— 让DateEdit支持只选择年月 (提供源码下载)
前言 上一篇博文<玩转控件:重绘ComboBox —— 让ComboBox多列显示>中,根据大家的回馈,ComboBox已经支持筛选了,更新见博文最后最后最后面. 奇葩 这两天遇到 ...
- Python Threading多线程简单例子
业务监控,多线程例子,实现每类个监控项的不同监控间隔. #coding=utf-8import sysimport pymysqlimport osfrom prometheus_client imp ...