jQuery入门讲解
jQuery设计思想:
(1)选择页面元素
css选择器:
$(document) 选择整个文档对象, $("#myId") 选择id为myId的页面元素, $("div.myClass")选择class为myClass的div元素
jQuery特有的选择器:
$("a:first")选择页面中第一个a元素,$("tr:odd")选择表格的奇数行,$("div:visible")选择可见的div元素。
(2)方法函数化
原生的:window.onload,innerHTML,onclick。
jQuery的:$(),html(),click()。
在jQuery代码中很少看到有等号出现的情况。因为它都函数化了,意思就是用函数的形式改写了原生的操作。比如:div.innerHTML = "chaojidan",$("div").html("chaojidan");div.onclick = function(){},$("div").click(function(){});
(3)原生与jQuery的关系
原生和jQuery可以共存,比如:$("div").click(function(){ this.innerHTML = "chaojidan";})
原生和jQuery不能混用,比如:$("div").innerHTML = "chaojidan"; div.html("chaojidan"),这两个都是错误的写法。
(4)改变结果集
强大的过滤器:$("div").has("p")选择包含p元素的div元素,$("div").not(".myClass")选择class不等于myClass的div元素,$("div").filter(".myClass")选择class等于myClass的div元素。
相邻元素查找:$("div").next("p")选择div元素后面的(必须紧挨着)第一个p元素,$("div").parent()选择div元素的父元素,$("div").children()选择div元素的所有子元素。
(5)链式操作
$("div"). //找到页面上的所有div元素
find("h3"). //在div元素下找h3元素
eq(2). //取第三个h3元素
html("chaojidan"); //设置它的内容为chaojidan
jQuery还提供了.end方法,此方法可以使结果集后退一步。比如:
$("div"). //找到页面上的所有div元素
find("h3"). //在div元素下找h3元素
eq(2). //取第三个h3元素
html("chaojidan"). //设置它(第三个h3元素)的内容为chaojidan
end(). //此时的this指向就是在div元素下找h3元素的那个集合
.eq(0). //取第一个h3元素
.html("chaojidan2"); //设置它的内容为chaojidan2
(6)取值与赋值合体
$("h1").html(),没有参数,表示取出h1的值;$("h1").html("hello"),有参数,表示对h1进行赋值。
取值是对一组元素的第一个元素做操作,赋值是对一组中的所有元素做操作。
.css(),.attr(),这些函数,当传入一个参数时,是取值,当传入两个参数时,是赋值。
(7)元素的移形换位
直接移动该元素:$("div").insertAfter($("p"));把div元素移动到p元素的后面;$("p").appendTo($("div"));把p元素移动到div元素的里面。比如:$("div").insertAfter($("p")).css("background","red");这里会把div元素的背景颜色设置成红色。
移动其他元素:$("p").after($("div"))把div元素移到p元素的后面;$("div").append($("p"));把p元素移动到div元素的里面。比如:$("p").after($("div")).css("background","red");这里会把p元素的背景颜色设置成红色。
(8)强大的创建
$("#ul").append("<li>aaa</li>");创建一个li元素,把它添加到ul中。
$("<li>");创建一个li元素
$("div").clone().appendTo($("p"));克隆一个div元素,并把这个克隆的div添加到p元素里面,原来的那个div不变。
(9)工具方法
构造函数上的方法(静态方法):$.each([],function(){}),$.trim()。原生的js可以调用这些方法。比如:var liList = document.getElementsByTagName("li");$.each(liList,function(index,element){});
原型上的方法(实例方法):$("div").each(function(index,element){})
(10)事件操作
独立事件:click()针对click事件,mouseover()针对mouseover事件,比如:$("div").click(function(){}),点击div元素会触发回调函数。
通用事件:bind(),one(),unbind(),比如:$("div").bind("click mouseover",function(){}),这里给div元素绑定了click和mouseover两个事件。
jquery中,如果在回调函数中,返回false,表示阻止事件冒泡以及阻止默认操作。
在js原生方法中,div.onclick = function(){},在回调函数返回false,也有一样的效果。
attachEvent也有一样的效果,但是addEventListener就不行。
(11)运动效果
常见效果:.fadeIn()淡入,.fadeOut()淡出,.slideDown()向下展开,.slideUp()向上卷起。
比如:$("#input1").toggle(function(){$("#div1").fadeOut()}, function(){$("#div1").fadeIn()}),点击按钮input1,就会把div隐藏,再次点击input1,就会把div显示。
复杂效果:.animate()动画操作,stop()。比如:
$("#div1").hover(
function(){
$(this).animate({
width:300,
height:300
})
},
function(){
$(this).animate({
width:200,
height:200
})
}
)
鼠标移入div元素,元素div就会变成大到300*300,鼠标移出div元素,元素div就会缩小到200*200.
stop方法是用来停止动画的。
(12)插件机制
在jQuery的源码上进行扩展。是其他人写的,不是jQuery官方写的,比如你自己也可以写一个基于jQuery的list列表插件list.js。在使用此插件时,你需要先引入jQuery,然后再引入你的list.js。如果想详细了解jQuery插件请看:http://www.cnblogs.com/chaojidan/p/4213942.html
(13)UI组件
jQuery官方提供的功能效果和UI样式。比如:选项卡Tab,拖拽Draggable。你使用这些功能效果时,除了需要引入jQeury外,还需要引入jQuery.ui.js(这个js文件里面实现了这些功能效果)。如果想深入了解jQuery UI,请看:http://www.cnblogs.com/chaojidan/p/4220941.html
加油!
jQuery入门讲解的更多相关文章
- jQuery入门(1)jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- 第一百六十二节,jQuery入门介绍
jQuery入门 学习要点: 1.什么是 jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本 I ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门(3)事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
- Mysql C语言API编程入门讲解
原文:Mysql C语言API编程入门讲解 软件开发中我们经常要访问数据库,存取数据,之前已经有网友提出让鸡啄米讲讲数据库编程的知识,本文就详细讲解如何使用Mysql的C语言API进行数据库编程. ...
随机推荐
- 读取指定路径的Properties文件
1.读取项目内的properties文件,项目内的properties文件一般都放在resource文件夹下面, 通过getClassLoader().getResourceAsStream()来获取 ...
- Python3 abs() 函数
Python3 abs() 函数 Python3 数字 描述 abs() 函数返回数字的绝对值. 语法 以下是 abs() 方法的语法: abs( x ) 参数 x -- 数值表达式,可以是整数,浮 ...
- Zookeeper 目录
Zookeeper 目录 Zookeeper 致力于提供一个高性能.高可用,且具有严格的顺序访问控制能力(主要是写操作的严格顺序性)的分布式协调服务.以下是我整理的笔记. 一.分布式理论基础 1.1 ...
- java消息中间件的使用与简介
一.为什么要使用消息中间件 消息中间件就是可以省去繁琐的步骤,直达目的,怎么讲呢,就是比如你想很多人,知道你的动态,而知道的人可能手机没电,可能手机信号不好,可能手机不在服务区,或者看的人比较忙,看的 ...
- edis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots,
edis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots ...
- PHP(五)session和文件上传初步
- 让UITableView的Cell都变成静态的
UITableView给我们提供了一个非常不错的展示列表的工具.内置了复用机制,其中的Cell按照一般的写法就可以实现服用,不用在Cell滚动的时候每次都创建一个新的.实现了非常好的用户体验.但是,有 ...
- HDU2544 最短路 2017-04-12 18:51 31人阅读 评论(0) 收藏
最短路 Time Limit : 5000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Submissio ...
- Centos环境下手动设置-网络参数配置-网络挨排错顺序-设置网卡为上网模式的设定
Linux中网络参数大致包含以下内容: IP地址 子网掩码 网关 DNS服务器 主机名(默认 localhost) 历来Linux系统中修改这些参数的方式通常有:命令.文件两种.其中通过命令设置可以立 ...
- Mirth Connect的简单使用
第一步: 切换到Channels界面,右键点击New Channel 第二步 : 上面是设置一些通道信息. 其中summary(概要) 界面主要包含 通道名称,数据类型,依赖,通道初始状态,附件(是否 ...