jQuery - 1.简单的JQuery
1.简单的JQuery
$(document).ready(function () {
alert("加载完毕!");
});//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。
//当页面Dom元素加载完毕时执行代码,可以简写为:
$(function () {
alert("加载完毕!");
});
和onload类似,但是onload只能注册一次(window.onload=function...) ,后注册的取代先注册的,而ready则可以多次注册都会被执行。
JQuery的ready和Dom 的onload的区别(*):onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发,而ready则是Dom元素创建完毕后就被触发,这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
$(window).load(function() {
alert("gee");
});
2.jQuery对象(包装集)、Dom对象
DOM对象的JavaScript方法
- Var obj=document.getElementById(“ID”);
- Var objhtml=obj.innerHTML;
jQuery对象是通过jQuery包装DOM对象后产生的对象
- $(“#ID”).html();
jQuery对象不能使用DOM对象的方法,DOM对象也不能使用jQuery对象的方法
- var $cr = $(“#cr"); var cr = $cr[0]; // var cr = $cr.get(0);
$(document).ready(function() {
var $div = $("#d2");
//把JQuery转换为DOM
var div = $div.get(0);
div.innerHTML = "cba";
});
- var cr = document.getElementById("cr"); var $cr = $(cr);
window.onload = function() {
var div = document.getElementById("d1");
//把DOM对象转换为JQuery对象
var $div = $(div);
$div.html("333");
};
Array是JS语言本身的对象,不是Dom对象,因此不需要转换为Jquery对象才能用
3.JQuery提供的函数
$.map(array,fn) 对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组。猜猜内部实现。
例子,得到一个元素值是原数组值二倍的新数组
var arr = [3, 5, 9];
var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。
$.map不能处理Dictionary风格的数组。
$.each(array,fn) 对数组arry每个元素调用fn函数进行处理,没有返回值。猜猜内部实现。
var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
$.each(arr, function(key, value) { alert(key+"="+value); });
如果是普通风格的数组,则key的值是序号。
还可以省略function的参数,这时候用this可以得到遍历的当前元素:
var arr = [3, 6, 9];
$.each(arr, function() { alert(this); });//能读懂。
普通数组推荐用无参,用dict风格的就用key、value。
$.函数名 可以视为静态函数
//$.map有返回
var arr = [100, 200, 300, 400];
arr = $.map(arr, function (n) {
return n * 4;
});
alert(arr);
////!------弹出[400,800,1200,1600]
var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
//$.each(arr, function (key, value) {
// alert(key + "=" + value);
//});
//!------分别弹出"tom=汤姆","jerry=杰瑞","lily=莉莉"
//$.each(arr, function () {
// alert(this);
//});
//!------分别弹出汤姆,杰瑞,莉莉
//var tt = [ 2, 3, 5 ];
//$.each(tt, function () {
// alert(this);
//});
////!------分别弹出2,3,5
//$.map(arr, function() {
// alert(this);
//});
//!------分别弹出3个 [object Window]
jQuery - 1.简单的JQuery的更多相关文章
- Jquery(一) 初识Jquery,简单使用Jquery。
距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和boots ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- jquery实现简单瀑布流布局(续):图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- 简单的jquery拖曵原理js特效实例
<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...
- Javascript对象、Jquery扩展简单应用
Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- Jquery实现简单的分页
转,Jquery实现简单的翻页功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 简单的JQuery top返回顶部
一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...
随机推荐
- iOS跳转到另一个程序
我这里只是写了部分东西,如果想看更加详细的,请点击原文链接. 原文链接:http://blog.csdn.net/likendsl/article/details/7553605 原则上iOS的沙 ...
- 说说JSON和JSONP,也许你会豁然开朗
前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...
- Xcode 8 : iOS xib is missing from working copy、iOS misssing file
1,造成此问题可能是SVN的原因,通过命令行解决. 2.未使用SVN,竟然是icloud 造成的,通过 改变网络状态 + 重启Xcode 解决.
- Sqli-LABS通关笔录-10
好像咋整都没辙.实在是关卡越高越不好整. 弄报错.咋整咋不报错. and sleep(10);鸭蛋的也不好搞.实在没辙.就看源码了. 由代码得出payload: THE END
- 4 Handler相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...
- HDU 1024 max sum plus
A - Max Sum Plus Plus Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I6 ...
- 分治法避免定义多个递归函数,应该使用ResultType
总结:对二叉树应用分治法时,应避免定义多个递归函数,当出现需要递归求解多种的结果时,尽量使用ResultType来让一次递归返回多种结果. 题目:Binary Tree Maximum Path Su ...
- Wilson定理证明
Wilson定理证明 就是那个\((p-1)! \equiv -1 \pmod{p}\),\(p\)是一个素数. Lemma A \(\mathbb{Z}_p\)可以去掉一个零元变成一个群. 即\(\ ...
- spring ext 跨域
read方法中调用的response对象是父类BaseController的一个成员变量. spring默认bean的生命周期Score为singleton单例模式. 当多线程并发使用同一bean, ...
- xdebug安装
sudo apt-get install php-pearsudo apt-get install php5-devsudo pecl install xdebug 下载安装编译完后,在php.ini ...