JQuery笔记
一.what
JS框架
框架: 半成品.一半已经完成了,一半没有完成.
JS框架:相当于一些现成的函数和对象的集合,直接拿来使用就可以了
常见的JS库还有Prototype、Ext JS、Dojo、MooTools、YUI等
二、HOW
1.引入jquery-2.1.4.js
2.从下面的语句开始
//ready方法的作用是当页面中的DOM加载完后执行参数中的函数
$(document).ready(function(){
alert("Hello World!");
});
三．DOM对象和jQuery对象的转化
1.dom对象--->jQuery对象
$(DOM对象):是把DOM对象转化成JQuery对象
演示代码
//1.dom对象---->jQuery对象
var div1 =document.getElementById("div1");
var $div1 = $(div1);
alert($div1.html());// $div1.width()
jQuery对象实质就是map、关联数组
Dom对象是存到jQuery对象的第一个元素中
使用console.dir打印jQuery对象演示
使用数组模拟jQuery对象
2.把jQuery对象转化为DOM对象
//2.把jQquery对象--->dom对象
var $div = $("#div1");
//第一种方式
//var div = $div[0];//div是DOM对象
//第二种方式
var div = $div.get(0);
alert(div.innerHTML);
变量定义的规范:jQuery对象前面要加$,dom对象不用加$
使用数组模拟jQuery对象
var div1 = document.getElementById("div1");
var arr = [div1,2,3];
Array.prototype.aaa= "111";
Array.prototype.get = function(i){
return this[i];
}
var haha = arr.get(0);
alert(haha)
四.$(document).ready()和window.onload区别
(1)window.onload只能绑定一个事件处理函数，如果绑定多个
只执行最后一个，而$(document).ready()可以绑定多个函数
(2)
window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行
$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
使用性能测试,测试一下两种方法的加载时间
第一种:
console.time("test");
window.οnlοad= function(){
console.timeEnd("test");
alert('test');
}
console.time("test");
$(document).ready(function(){
console.timeEnd("test");
alert('test');
});
(3)简写
window.onload 无
$(document).ready(function(){
});
可以简写成
$().ready(function(){
});
$(function(){
});
五.绑定事件处理函数
//绑定事件处理函数
$("#btn1").click(function(){
alert('你好');
});
jquery对象.click(事件处理函数)
六.修改样式
DOM方式
document.getElementById("hello").style.color= "red";//得值得时候无法得到内嵌样式的值
jQuery方式
$("#hello").css("color","#ff0000");//同一个方法名字既表示读操作，又表示写操作
$("#hello").css("color","#ff0000");//写操作
$("#hello").css("color");//读操作
七、jQuery 选择器
1、jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取
元素。
$("p.intro") 选取所有 class="intro" 的
元素。
$("p#demo") 选取 id="demo" 的第一个
元素。
2、jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于"#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于"#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
3、jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的CSS 属性。
实例：
This is a heading
This is a paragraph.
This is another paragraph.
更多的实例
| 语法 |
描述 |
| $(this) |
当前 HTML 元素 |
| $("p") |
所有 元素 |
| $("p.intro") |
所有 class="intro" 的 元素 |
| $(".intro") |
所有 class="intro" 的元素 |
| $("#intro") |
id="intro" 的第一个元素 |
| $("ul li:first") |
每个
|
| $("[href$='.jpg']") |
所有带有以 ".jpg" 结尾的 href 属性的属性 |
| $("div#intro .head") |
id="intro" 的 元素中的所有 class="head" 的元素 |
jQuery 选择器
| 选择器 |
实例 |
选取 |
| * |
$("*") |
所有元素 |
| #id |
$("#lastname") |
id=lastname 的第一个元素 |
| .class |
$(".intro") |
所有 class="intro" 的元素 |
| element |
$("p") |
所有 元素 |
| .class.class |
$(".intro.demo") |
所有 class=intro 且 class=demo 的元素 |
|
|
|
|
| :first |
$("p:first") |
第一个 元素 |
| :last |
$("p:last") |
最后一个 元素 |
| :even |
$("tr:even") |
所有偶数 |
| :odd |
$("tr:odd") |
所有奇数 |
|
|
|
|
| :eq(index) |
$("ul li:eq(3)") |
列表中的第四个元素（index 从 0 开始） |
| :gt(no) |
$("ul li:gt(3)") |
列出 index 大于 3 的元素 |
| :lt(no) |
$("ul li:lt(3)") |
列出 index 小于 3 的元素 |
| :not(selector) |
$("input:not(:empty)") |
所有不为空的 input 元素 |
|
|
|
|
| :header |
$(":header") |
所有标题元素
|
| :animated |
|
所有动画元素 |
|
|
|
|
| :contains(text) |
$(":contains('W3School')") |
包含文本的所有元素 |
| :empty |
$(":empty") |
无子（元素）节点的所有元素 |
| :hidden |
$("p:hidden") |
所有隐藏的 元素 |
| :visible |
$("table:visible") |
所有可见的表格 |
|
|
|
|
| s1,s2,s3 |
$("th,td,.intro") |
所有带有匹配选择的元素 |
|
|
|
|
| [attribute] |
$("[href]") |
所有带有 href 属性的元素 |
| [attribute=value] |
$("[href='#']") |
所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] |
$("[href!='#']") |
所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] |
$("[href$='.jpg']") |
所有 href 属性的值包含 ".jpg" 的元素 |
|
|
|
|
| :input |
$(":input") |
所有 元素 |
| :text |
$(":text") |
所有 type="text" 的 元素 |
| :password |
$(":password") |
所有 type="password" 的 元素 |
| :radio |
$(":radio") |
所有 type="radio" 的 元素 |
| :checkbox |
$(":checkbox") |
所有 type="checkbox" 的 元素 |
| :submit |
$(":submit") |
所有 type="submit" 的 元素 |
| :reset |
$(":reset") |
所有 type="reset" 的 元素 |
| :button |
$(":button") |
所有 type="button" 的 元素 |
| :image |
$(":image") |
所有 type="image" 的 元素 |
| :file |
$(":file") |
所有 type="file" 的 元素 |
|
|
|
|
| :enabled |
$(":enabled") |
所有激活的 input 元素 |
| :disabled |
$(":disabled") |
所有禁用的 input 元素 |
| :selected |
$(":selected") |
所有被选取的 input 元素 |
| :checked |
$(":checked") |
所有被选中的 input 元素 |
八、jQuery 事件
下面是 jQuery 中事件函数的一些例子：
| Event 函数 |
绑定函数至 |
| $(document).ready(function) |
文档的就绪事件 （当 HTML 文档就绪可用） |
| $(selector).click(function) |
被选元素的点击事件 |
| $(selector).dblclick(function) |
被选元素的双击事件 |
| $(selector).focus(function) |
被选元素的获得焦点事件 |
| $(selector).mouseover(function) |
被选元素的鼠标悬停事件 |
jQuery 事件方法
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
jQuery 事件处理方法
事件处理方法把事件处理器绑定至匹配元素。
| 方法 |
触发 |
| $(selector).bind(event) |
向匹配元素添加一个或更多事件处理器 |
| $(selector).delegate(selector, event) |
向匹配元素添加一个事件处理器，现在或将来 |
| $(selector).die() |
移除所有通过 live() 函数添加的事件处理器 |
| $(selector).live(event) |
向匹配元素添加一个事件处理器，现在或将来 |
| $(selector).one(event) |
向匹配元素添加一个事件处理器。该处理器只能触发一次。 |
| $(selector).unbind(event) |
从匹配元素移除一个被添加的事件处理器 |
| $(selector).undelegate(event) |
从匹配元素移除一个被添加的事件处理器，现在或将来 |
| $(selector).trigger(event) |
所有匹配元素的指定事件 |
| $(selector).triggerHandler(event) |
第一个被匹配元素的指定事件 |
HTMLDOM常见操作
-创建节点、查找节点、插入节点、移动节点、删除节点、复制节点、替换节点、包裹节点
多了克隆、移动、包裹
一.创建节点
var $div5 = $("
二.插入节点
1.插入同级元素(兄弟元素)
after() 在每个匹配的元素之后插入内容 HTML代码:
我想说:
jQuery代码:
$("p").after("你好");
结果:
我想说:
你好
insertAfter 与after()相反 HTML代码:
我想说:
jQuery代码:
$("你好").insertAfter("p");
结果:
我想说:
你好
before() 在每个匹配的元素之前插入内容 HTML代码:
我想说:
jQuery代码:
$("p").before("你好");
结果:
你好
我想说:
insertBefore() 与before()相反 HTML代码:
我想说:
jQuery代码:
$("你好").insertBefore(“p");
结果:
你好
我想说:
2.插入子级元素
append() 向每个匹配的元素内部追加内容 HTML代码:
我想说:
jQuery代码:
$("p").append("你好");
结果:
我想说:你好
appendTo() 与append相反 HTML代码:
我想说:
jQuery代码:
$("你好").appendTo("p");
结果:
我想说:你好
prepend() 向每个匹配的元素内部前置内容 HTML代码:
我想说:
jQuery代码:
$("p").prepend("你好");
结果:
你好我想说:
prependTo() 与prepend相反 HTML代码:
我想说:
jQuery代码:
$("你好").prependTo("p");
结果:
你好我想说:
三.移除节点
1.remove()删除
jquery对象.remove();//返回被移除的节点的jQuery对象
$("#div1").remove();
2 empty() 清空
$("ul li:eq(3)").empty();//清空元素中的内容
把remove()方法改成empty()演示
三.节点的替换(修改)
1.replaceWith()方法
例: 把div4替换成一个文本框
$("#div4").replaceWith("
");
body中的代码
我是一个段落
2.replaceAll()方法 (和replaceWith()相反)
$("
").replaceAll($("#div4"));
1.原生js实现
生成dom对象 、设置属性、绑定事件
2.jQuery实现
生成jquery对象、设置属性、绑定事件
四.节点移动
$("ulli:eq(2)").insertAfter("ul li:eq(0)");
移动前 移动后
演示代码:
$(function(){
$("ulli:eq(2)").insertAfter("ul li:eq(0)");
});
五.克隆节点
jQuery对象.clone();//返回克隆出来的对象，相当于对象.clone(false);
jQuery对象.clone(true);//克隆出来的对象含有事件
例:单击任何一个li，复制出这个li,附着在ul后面
演示代码:
$(function(){
//需求: 单击任何一个li,复制出这个li,附着在ul后面
//给所有li绑定单击事件
$("ul>li").click(function(){
var $obj = $(this).clone(true);
$("ul").append($obj);
});
});
六.节点的包裹
1.wrap()方法
你最喜欢的水果是?
你最喜欢的水果是?
$("strong").wrap("")
包裹后的结果
你最喜欢的水果是?
你最喜欢的水果是?
2.wrapAll()方法
$("strong").wrapAll("")
你最喜欢的水果是?
你最喜欢的水果是?
2.wrapInner()方法包裹里面的文本
例：
$("strong").wrapInner("")
包裹后的结果
你最喜欢的水果是?
你最喜欢的水果是?
七.遍历子元素和兄弟元素
代码见 jQuery API手册筛选查找
1.遍历子元素
children() 获得所有孩子节点,不包括孙子节点
var v1 = $("body").children();//查找body的孩子结点,不包括孙子节点,返回集合元素
演示代码:
$(function(){
//遍历body的子元素
//先得到body
var $body = $("body");
var childArr = $body.children();
console.info(childArr.length);//3
});
我是div中的p标签
我是p标签
我是h1
jQuery对象.find() 在jQuery对象下找 某个元素
var $div1 = $("#div1");
console.info($div1.find("p"));//在id为div1的元素下找p节点
2.遍历兄弟元素
访问下面的一个元素 对象.next();
访问上面的一个元素 对象.prev();
访问所有的兄弟元素 对象.siblings();
3.遍历父元素
原生JS方式: dom对象.parentNode
jQuery方式
对象$("p").parent();//得到p元素的父亲节点
$("p").parents();//得到p元素的所有父亲节点
代码参见:jQuery手册中的 筛选--查找--parent和parents
Parent演示代码:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script src="../../../js/jquery-3.1.0.js"type="text/javascript"charset="utf-8">script>
<script type="text/javascript">
$(function() {
var $parents = $("p").parent();
console.dir($parents);
});
script>
head>
<body>
<div>
<p>Hellop>
<p>Hellop>
div>
body>
html>
一.属性操作
1.attr()获取与设置属性
jQuery对象.attr("name");//获取name属性 ok
jQuery对象.attr("name","zzy");//设置name属性为zzy ok
jQuery对象.attr("type");//获取属性 ok
jQuery对象.attr("type","password");//设置属性 报错 jQuery不允许改type属性
但原生js可以修改dom对象的type属性
2.attr()方法也可以接受JSON数据格式用来修改多个属性
$("#test").attr({"name":"zzy","value":"333"});
3.removeAttr() 移除属性
removeAttr(“属性名”);// 移除属性
学生练习:注册页面,点击”接受协议”按钮才可以使用
演示代码:
$(function(){
var $agree = $("#agree");
var $btn1 = $("#btn1");
$agree.click(function(){
if($agree.prop("checked")==true){//复选框被选用了
//按钮可用
$btn1.removeAttr("disabled");
}else{
//按钮不可用
$btn1.attr("disabled","disabled");
}
});
});
同意该协议
二.样式操作
1.修改单一样式
css(“属性名”,”属性值”)
DOM方式
document.getElementById("hello").style.color= "red";
jQuery方式
$("#hello").css("color","#ff0000");
同一个方法名字既表示读操作，又表示写操作
$("#hello").css("color","#ff0000");//写操作
$("#hello").css("color");//读操作
css()方法也可以接受JSON对象来同时修改多个属性
演示代码:
$("#div1").css({
"backgroundColor":"yellowgreen",
"color":"red"
});
2.修改整套样式
演示代码参见 锋利的jQuery 源代码 第三章例子--3-9样式操作 3-9-1.html
(1)通过attr()方法
DOM方式
document.getElementById("hello").className=”样式名”;
jQuery方式
$("p").attr("class","high");
(2)addClass()添加样式
给class属性增加一个样式,如果以前有样式比如
class="hello"
调用$("p").addClass("high");后
样式修改为class="hellohigh"
注意:相同样式以定义在css文件后面的为准
(3)removeClass()移除样式
removeClass("样式名");//移除一个样式
removeClass();//移除所有样式
(4)toggleClass()样式切换
$("p").toggleClass("another");//有就删除,没有就添加
(5)hasClass()或is()判断是否含有样式
1.$("p").hasClass("another")
2.$("p").is(".another")
补充: 对象.is(":checked") 判断复选框是否被选择中
对象.is(":animated")判断当前元素是否正处在动画当中
三.html()、text()、val()区别
html() 相当于 innerHTML 内部的HTML代码
text() 相当于 innerText 内部的文本 不包括HTML代码
val() 相当于 value 值 得到dom对象的value值
演示代码:
$(function(){
var str =$("#username").val();
alert(str);
});
我是div111
动画
(一)内置动画
1.show()和hide()
div.show("slow");//0.6秒
div.show("normal");//0.4秒
div.show("fast");//0.2秒
div.show(毫秒);
如果不加参数直接调用show()是立即显示 没有动画效果
增加宽度(从左到右增大)、增加高度(从上到下增大),同时增加内容的不透明度
2.fadeIn()和fadeOut()淡入淡出效果
对象.fadeIn();//淡入 增加不透明度
对象.fadeOut();//淡出 减少不透明度 直到元素完全消失(display:none)
与show()方法不同,fadeIn()和fadeOut()方法只改变元素的不透明度.
3.slideUp()、slideDown()收缩、展开效果(用于层)
slideUp()、slideDown() 只会改变元素的高度
动画积累问题解决
当用户快速在某个元素上执行animate()动画时,就会出现动画积累.解决方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,如果元素正处于动画状态不添加动画.
$(function() {
//需求: 点击标题后 显示标题下面的div
$("#panel").toggle(function(){
if(!$("#panel").find("div.content").is(":animated")){//不处在动画状态中
$("#panel").find("div.content").slideDown("slow");
}
},function(){
if(!$("#panel").find("div.content").is(":animated")){
$("#panel").find("div.content").slideUp("slow");
}
});
});
(二)自定义动画animate()
1. 自定义简单动画
animate({left:"500px"},3000,function(){alert(3);});
参数1：让div向右移动500px
参数2：移动所需的时间(可以省略)
参数3: 移动完成调用回调函数(可以省略)
完整演示代码如下:
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000,function(){
$(this).fadeOut(2000);
});
});
});
保存成功
2. 多重动画
(1)同时执行多个动画
$(function(){
$("#img1").click(function(){
$(this).animate({left:"500px",height:"200px"},3000);
});
});
(2)按顺序执行多个动画
上例中是移动和调整宽度同时进行,如果想按顺序执行动画,例如先向右滑动,然后再放大它的高度,只需把代码拆开
$(function() {
$("#img1").click(function(){
$(this).animate({left:"500px"},3000);
$(this).animate({width:"200px"},3000);
});
});
因为animate都是对同一个jQuery对象操作的,也可以改为链式操作
$(function() {
$("#img1").click(function(){
$(this).animate({left:"500px"},3000).
animate({width:"200px"},3000);
});
});
像这样动画效果的执行具有先后顺序,称为”动画队列”.
3.综合动画
$(function(){
$("#panel").css("opacity","0.5");//设置不透明度
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
});
});
html>
4.动画回调函数
如果想在最后一步切换元素的CSS样式,而不是隐藏元素.
需要把最后fadeOut(“slow”)改为.css("border","5px solid blue");
但是这样并不能得到预期效果,预期效果是在动画的最后一步改变元素的样式,而实际效果是刚开始执行的时候,css()方法就执行了.出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数(callback)对非动画方法实现排队.只要把css()方法写在最后一个动画的回调函数里即可.代码如下:
$(function() {
$("#panel").css("opacity","0.5");//设置不透明度
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$("#panel").css("border","5pxsolid blue");
});
});
});
5.停止动画
$("#btn1").click(function(){
$("#panel").stop();//只能停止一个动画
});
6.延迟动画
$(function() {
$("#panel").css("opacity","0.5");//设置不透明度
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000)
.delay(3000)
.animate({top:"200px",width:"200px"},3000,function(){
$("#panel").css("border","5pxsolid blue");
});
});
//停止动画
$("#btn1").click(function(){
$("#panel").stop();
});
});
(三)其他动画方法
toggle()、slideToggle()、fadeTo()和fadeToToggle();
fadeTo() 把元素的不透明度调整到指定的值
$(function() {
//需求: 点击标题后 显示标题下面的div
$("#panelh5.head").click(function(){
$(this).next().fadeTo(600,0.2);//600毫秒 不透明度调整到0.2
});
})
在css中调整不透明度
.content {
padding: 10px;
text-indent: 2em;
border-top: 1px solid #0050D0;
background-color: rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
}
jQuery AJAX 函数
AJAX 和 jQuery
jQuery 提供了供 AJAX 开发的丰富函数（方法）库。
通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
AJAX 和 jQuery
jQuery 提供了供 AJAX 开发的丰富函数（方法）库。
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中！
------------------------------------------------------------------------------------
实例：
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
通过 AJAX 改变文本
页面显示为
点击“改变内容”，页面变为
----------------------------------------------------------------------------------------------------------------
jQuery- AJAX load() 方法
● load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
通过 AJAX 改变文本
页面显示为
点击“改变内容”，页面变为
---------------------------------------------------------------------------------------------------------------
jQuery AJAX 请求
| 请求 |
描述 |
| $(selector).load(url,data,callback) |
把远程数据加载到被选的元素中 |
| $.ajax(options) |
把远程数据加载到 XMLHttpRequest 对象中 |
| $.get(url,data,callback,type) |
使用 HTTP GET 来加载远程数据 |
| $.post(url,data,callback,type) |
使用 HTTP POST 来加载远程数据 |
| $.getJSON(url,data,callback) |
使用 HTTP GET 来加载远程 JSON 数据 |
| $.getScript(url,callback) |
加载并执行远程的 JavaScript 文件 |
注：
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项