js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法
一、总结
一句话总结:
1、document.ready和window.onload的区别:用哪个好?
document.ready直接加载完dom树即可加载,document.ready可加载多个
2、document.ready函数怎么写?
$(document).ready(匿名函数)
3、window.onload函数怎么写?
window.onload=function(){}
4、js中某个元素的某个方法比如click,在js中动态怎么写?
元素.方法=匿名函数 window.onload=function(){}
二、js进阶 10-3 js语法二
1、相关知识:JQuery概述
1.JQuery简介
- JQuery是一个JavaScript库。极大地简化了JavaScript编程。
- JQuery拥有强大的选择器支持,支持CSS1-CSS3几乎所有的选择器,以及JQ独创的高级而复杂的选择器。
- 解决了不同浏览器间的兼容问题
- 代码简洁,功能强大,易于理解......
2.JQuery的引入
注:jquery1.x版本支持IE 6/7/8;jquery-2.x以上版本不再支持IE 6/7/8
目前最新版本为jquery-3.1.1(最新),大家可以随时关注官网最新版本的动态,对于初学者来说,看教程的时候,你看以前版本的教程书籍依然有用,很对新版本增加的功能对于初学者未必用得上,另你掌握了一个版本的用法之后,即使版本后续有更新,只要关注更新部分即可,不会对学习造成太大的困扰.......
JQuery各版本下载地址
- 官网下载到本地引入
- 百度压缩版本引用地址1:
http://libs.baidu.com/jquery/2.0.0/jquery.min.js - 百度压缩版本引用地址2:
https://code.jquery.com/jquery-3.1.1.min.js
.....
3.JQuery的语法
基础语法是:$(selector).action()
- 美元符号定义JQuery
- $就是jquery对象
- $是JQuery中选取元素的符号
- $是JQuery中功能函数的前缀(功能函数后边再讲)
- 选择符(selector)"查询"和"查找"HTML元素
- JQuery的action()执行对元素的操作
4.document.ready和window.onload的区别
Jquery中$(document).ready()的作用类似于传统javaScript中的window.onload方法,不过与window.onload方法还是有区别的。
- $(function(){})和$(document).ready(function(){})这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数
Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 - Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
- Window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="ktys3.js"></script>
</head>
<body>
<input type="button" value="测试按钮">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<p id="p4">段落4</p>
<script>
//给元素添加事件
//alert($===jQuery) // $('input').click(function(){
// alert('jQuery就是这么简单!')
// }) jQuery('input').click(function(){
alert('jQuery就是这么简单!')
})
jQuery('p').click(function(){
jQuery(this).hide()
})
</script> </body>
</html>
// $('#p2').css('color','red').css('font-size','50px')
// window.onload=function(){
// $('#p2').css('color','red').css('font-size','50px')
// } // window.onload=function(){
// $('#p4').css('color','red').css('font-size','50px')
// }
$(document).ready(function(){
$('#p1').css('color','green').css('font-size','50px')
}) $(document).ready(function(){
$('#p3').css('color','green').css('font-size','50px')
})
js进阶 10-3 jquery中为什么用document.ready方法的更多相关文章
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- jQuery学习笔记(9)--jquery中的事件--$(document).ready()
1.$(document).ready()方法是事件模块中最重要的一个函数,可以极大地提高web应用程序的相应速度. 2.执行时机:DOM就绪后就会执行,而javascript中window.onlo ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
- js 进阶 10 js选择器大全
js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
随机推荐
- 6.在单机上实现ZooKeeper伪机群/伪集群部署
转自:https://blog.csdn.net/poechant/article/details/6633923
- Android .getRGB得到是负数,解决方案
情景:ava.awt.color 下面的getRGB怎么得出的是负数???本来想通过getRGB得到一个整数,在另外的一个部分在根据这个整数构件一个color,因为参数规定只能能传整数!!!color ...
- JS /CSS 实现模态框(注册和登录组件)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 洛谷 P2025 脑力大人之监听电话
P2025 脑力大人之监听电话 题目背景 画外音: (声明:不要管前面那个,纯属意外,现已经重新编题,绝对原创) 上次海选,我们选出了参赛者中的20%参加本次比赛,现在我们将进行第二轮的筛选,这次的比 ...
- Qt5官方demo解析集28——Extending QML - Signal Support Example
本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文Qt5官方demo解析集27--Extendin ...
- JS实现放大镜效果(放大图片)
注意:里边的两张图片(一大一小)可以自己添加,JQ采用jquery-1.11.3.js版,也可自行调换. HTML代码: <!DOCTYPE html> <html> < ...
- 应用Python来计算排列中的逆序数个数
在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.一个排列中所有逆序总数叫做这个排列的逆序数.也就是说,对于 ...
- POS 60域用法
版权声明:本文为博主原创文章,未经博主允许不得转载. 自定义域(Reserved Private) 1.变量属性 N...17(LLLVAR),3个字节的长度值+最大17个字节的数字字符域. 压缩时用 ...
- 分类算法简介 分类: B10_计算机基础 2015-03-09 11:08 257人阅读 评论(0) 收藏
一.决策树 决策树是用于分类和预测的主要技术之一,决策树学习是以实例为基础的归纳学习算法,它着眼于从一组无次序.无规则的实例中 推理出以决策树表示的分类规则.构造决策树的目的是找出属性和类别间的关系, ...
- 魔兽争霸war3心得体会(四):不死族vs人族1本火魔塔
QQ对战平台上玩随机的人特别多,为了应对对方的"出其不意",我最近一直用小狗去探路,小狗在家采集30个木头-摆放商店,就可以去探路了.主要有几个好处:知道对方的种族-出生点位-开局 ...