JQuery概述
什么是JQuery？
jQuery， 顾名思义， 也就是 JavaScript 和查询（Query） ， 它就是辅助 JavaScript 开发的 js 类库。
JQuery核心思想
它的核心思想是 write less,do more(写得更少,做得更多)， 所以它实现了很多浏览器的兼容问题。
JQuery流行程度
jQuery 现在已经成为最流行的 JavaScript 库， 在世界前 10000 个访问最多的网站中， 有超过 55%在使用jQuery。
jQuery 好处
jQuery 是免费、 开源的， jQuery 的语法设计可以使开发更加便捷， 例如操作文档对象、 选择 DOM 元素、制作动画效果、 事件处理、 使用 Ajax 以及其他功能。
JQuery初体验
需求： 使用 jQuery 给一个按钮绑定单击事件?
JQuery初体验
JQuery核心函数
$ 是 jQuery 的核心函数， 能完成 jQuery 的很多功能。 $()就是调用$这个函数
jQuery 对象和 dom 对象区分
什么是 jQuery 对象？ 什么是 dom 对象？
DOM对象
DOM 对象 Alert 出来的效果是： [object HTML 标签名 Element]
JQuery对象
jQuery 对象 Alert 出来的效果是： [object Object]
jQuery 对象的本质是什么？
jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
jQuery 对象和 Dom 对象使用区别
jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法
Dom 对象和 jQuery 对象互转
dom 对象转化为 jQuery 对象
将DOM对象传入$()中即可
jQuery 对象转为 dom 对象
jQuery 对象[下标]取出相应的 DOM 对象
jQuery 选择器
基本选择器
演示
// 选择id="lastname" 的元素 $("#lastname") // 选择class="intro" 的所有元素 $(".intro"); //选择所有元素 $("p"); // 选择所有
、和
元素 $("h1, div, p");
层级选择器
演示
// 选择基本过滤选择器
演示
//选择第一个元素 $("input:first"); //选择最后一个元素 $("a:last"); //所有不为空的输入元素 $("input:not(:empty)"); //所有偶数 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 $("tr:even"); //所有奇数 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 $("tr:odd"); //列表中的第四个元素（index 值从 0 开始） $("ul li:eq(3)"); //列举 index 大于 3 的元素 $("ul li:gt(3)"); //所有标题元素,
... $(":header"); //所有动画元素 $(":animated");
内容过滤器
演示
//所有包含文本 "Hello" 的元素 $(":contains('Hello')"); //所有不为空的输入元素 $("input:not(:empty)"); //匹配所有含有子元素或者文本的父元素。 $(":parent"); //所有包含有元素在其内的
元素 $("div:has(p)"); //所有隐藏的
元素 $("p:hidden");
属性过滤器
演示
//所有带有 href 属性的元素
$("[href]");
//所有带有 href 属性且值等于 "default.htm" 的元素
$("[href='default.htm']");
//所有带有 href 属性且值不等于 "default.htm" 的元素
$("[href!='default.htm']");
//所有带有 title 属性且值以 "Tom" 开头的元素
$("[title^='Tom']");
//所有带有 href 属性且值以 ".jpg" 结尾的元素
$("[href$='.jpg']");
//所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串
$("[title|='Tomorrow']");
//所有带有 title 属性且值包含字符串 "hello" 的元素
$("[title*='hello']");
//带有 id 属性，并且 name 属性以 man 结尾的输入框
$( "input[id][name$='man']" );表单过滤器
演示
//所有 input 元素
$(":input");
//所有带有 type="text" 的 input 元素
$(":text");
//所有带有 type="password" 的 input 元素
$(":password");
//所有带有 type="radio" 的 input 元素
$(":radio");
//所有带有 type="checkbox" 的 input 元素
$(":checkbox");
//所有带有 type="submit" 的 input 元素
$(":submit");
//所有带有 type="image" 的 input 元素
$(":image");
//所有带有 type="reset" 的 input 元素
$(":reset");
//所有带有 type="button" 的 input 元素
$(":button");
//所有带有 type="file" 的 inpu
$(":file");表单对象属性过滤器
演示
//所有启用的元素
$(":enabled");
//所有禁用的元素
$(":disabled");
//所有选中的复选框选项
$(":checked");
//所有选定的下拉列表元素
$(":selected");JQuery元素筛选
JQuery的属性操作
//获取id='one'的元素中的html内容 $("div[id='one']").html(); //设置id='one'的元素中的html内容 $("div[id='one']").html("我是王多鱼");//页面效果为：我是王多鱼 //获取id='two'的元素中的text内容 $("div[id='two']").text(); //设置id='two'的元素中的text内容 $("div[id='two']").text("我是王多鱼");//页面效果为：我是王多鱼 //获取id='three'且type='text'的的value值 $(":text[id='three']").val(); //设置id='three'且type='text'的的value值 $(":text[id='three']").val("HelloWorld"); //操作单选、复选、下拉列表的勾选 $(".radio,.checkbox,#single,#multiple").val(["man","game","Japanese","male","female"]); //获取第一个复选框的name属性值 $(":checkbox:first").attr("name"); //设置最后一个复选框的name属性值 $(":checkbox:last").attr("name","hobbies"); //为第一个复选框添加自定义的love='never'属性值 $(":checkbox:first").attr("love","never"); //获取索引为0的单选框的选中状态 $(":radio:eq(0)").prop("checked"); //设置索引为1的单选框的选中状态 $(":radio:eq(1)").prop("checkbox","true");
案例-JQuery全选/全不选
案例要求
要求实现全选/全不选、全选、全不选、反选、提交按钮的功能。
案例实现
Exercise
What's your favorite sport?
全选/全不选
football
basketball
badminton
tableTennis
DOM对象的增删改
内部插入
外部插入
替换
删除
演示
DOM对象增删改
![骗你的，其实没有图片]()
什么情况啊！你！
别叫了，行不行啊！
别叫了，行不行啊！
案例-从左到右，从右到左
案例要求
做出两个下拉列表，再做出四个按钮。按钮的功能分别为：添加选中项到右边、添加全部项到右边、添加选中项到左边、添加全部项到左边。
案例实现
从左到右，从右到左
案例-表格的动态添加、删除
动态添加、删除表格记录
Name
Email
Salary
Delete
Jason
your_email@example.com
5000
Delete
Bob
your_email@example.com
6000
Delete
Bernardo
your_email@example.com
7000
Delete
添加新员工
name
email
salary
JQuery操作CSS样式
演示
Css样式操作
JQuery操作动画
基本动画
淡入淡出动画
上述所有方法都可以添加两个参数：
演示
JQuery操作动画演示
案例-CSS动画之品牌展示
案例要求
案例实现
CSS动画之商品展示练习
JQuery操作事件
JQuery页面加载后事件
什么是'JQuery页面加载后事件'?
$(document).ready()
JQuery页面加载后事件与原生JS页面加载后事件的触发顺序？
JQuery页面加载后事件与原生JS页面加载后事件的触发时机？
JQuery页面加载后事件与原生JS页面加载后事件的可执行次数？
JQuery其他常见事件
演示
//click()绑定单击事件
$("h5").click(function(){
alert("h5的单击事件");
});
//click()触发单击事件
$("h5").click();
//mouseover()绑定鼠标移入事件
$("h5").mouseover(function () {
alert("h5的鼠标移入事件");;
});
//mouseover()触发鼠标移入事件
$("h5").mouseover();
//mouseout()绑定鼠标移出事件
$("h5").mouseout(function () {
alert("鼠标移出事件");
});
//mouseout()触发鼠标移出事件
$("h5").mouseout();
//bind()元素绑定三个事件
$("h5").bind("click mouseover mouseout", function () {
console.log("别JB叫！");
});
//bind()分别触发三个事件
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();
//one()元素绑定三个事件
$("h5").one("click mouseover mouseout", function () {
console.log("我说的，眼老板是垃圾！");
});
//one()分别触发三个事件（一个事件只能被触发一次）
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();
//unbind()解除两个事件的绑定
$("h5").unbind("mouseover mouseout");
//unbind()解除所有事件的绑定（不传参，表示解除全部事件绑定）
$("h5").unbind();
//$(document).on(events,[selector],[data],fn)动态绑定事件
$(document).on("click mouseover mouseout", $("h5"), function(){
console.log("我是回调函数");
});事件冒泡
什么是事件冒泡？
事件的冒泡是指：父子元素同时监听同一个事件，当触发子元素的事件的时候， 同一个事件也被传递到了父元素的事件里去响应。
演示
JQuery操作事件
one
two
怎么解决事件冒泡？
在子元素事件函数体内， return false; 可以阻止事件的冒泡传递。
演示
JQuery操作事件
one
two
事件对象
什么是事件对象？
事件对象， 是封装有触发的事件信息的一个 javascript 对象。
如何获取事件对象？
在给元素绑定事件的时候， 在事件的 function( event ) 参数列表中添加一个参数， 这个参数名， 我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。
演示
//原生Js获取事件对象event
window.onload = function () {
document.getElementsByTagName("div")[0].onclick = function (event) {
console.log(event);
};
};
//JQuery获取事件对象event
$(document).ready(function () {
$("div:first").click(function (event) {
console.log(event);
});
});事件对象的作用
在我们使用bind()给一个元素一次性绑定多个事件时，我们该如何分别给这些事件设置单独的函数呢？这个时候，我们就需要用到事件对象event了。
//使用bind()给一个元素一次性绑定多个事件
$("div:first").bind("mouseover mouseout click", function (event) {
//若是mouseover事件，控制台打印mouseover
if (event.type == "mouseover") {
console.log("mouseover");
} else if (event.type == "mouseout") {
//若是mouseout事件，控制台打印mouseout
console.log("mouseout");
} else if (event.type == "click") {
//若是click事件，控制台打印click
console.log("click");
}
});案例-图片放大跟随
图片跟随
