一、jQuery是什么？
jQuery是一种方法库
语法：$ jQuery
二、jQuery文件引用
1、本地引用
语法：<script type="text/javascript" src="jquery.js"></script>
2、远程调用：
语法：<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery1.4.min.js"></script>
注意：需要在连网的情况下使用
三、jQuery对象与dom对象转换
1、dom对象转换为jQuery对象 $（dom对象）
2、jquery对象转换为dom对象（jquery对象[索引号]、jquery对象.get[索引号]）
-
<body>
-
<div id="box">hello div
</div>
-
<div id="box2">hello div
</div>
-
</body>
-
<script>
-
// 原生js 操作css
-
var _div =
document.
getElementById(
"box");
-
// _div.style.color = "red";
-
// _div.style.width = "200px";
-
-
// dom对象转换为jquery
-
// $(dom对象)
-
-
// jQuery(_div).css("color", "#00f");
-
// $(_div).css("color", "#00f");
-
// $(_div).css({ width: "200px", height: "100px", color: "yellow" });
-
-
// $("#box") === $(document.getElementById("box"));
-
-
// jquery对象 转换为 dom对象
-
// jquery对象[索引]
-
// jquery对象.get(索引)
-
-
// $("div")[1].style.backgroundColor = "red";
-
// $("div").get(0).style.backgroundColor = "red";
-
$(
"#box").
get(
0).
style.
color =
"#990";
-
-
// jquery对象 转换为 dom对象
-
// jquery对象[索引]
-
// jquery对象.get(索引)
-
-
// dom对象转换为jquery
-
// $(dom对象)
-
-
// jquery样式操作
-
// 添加一条样式
-
// jquery对象.css("样式属性名" , "属性值")
-
-
// 添加多条样式
-
// jquery对象.css({"样式属性名" : "属性值" , "样式属性名" : "属性值" , ...});
-
-
// 获取样式
-
// jquery对象.css("属性名")
-
</script>
四、jQuery入口小函数
语法：$（document）.ready（function（）{}）
简写：$(function()})
1、$（document）.ready（）与window.οnlοad=function（）{}的区别
| window.onload | $(document).ready() | |
| 执行时机 | 必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码 |
| 执行次数 | 只能执行一次，如果第二次，那么 第一次的执行会被覆盖 | 可以执行多次，第N次都不会被上 一次覆盖 |
五、在页面中得到DOM对象
1、JavaScript中得到DOM对象document.getElementById(“menu”)
2、jQuery得到jquery对象 $(“#menu”)
六、jQuery选择器分类
1、基本选择器
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据指定的id匹配元素 | 单个元素 | $(“#hel”)选择id=hel的元素 |
| .class | 根据类匹配元素 | 集合元素 | $(“.hel”)选择class=hel的元素 |
| Element | 根据元素名匹配元素 | 集合元素 | $(“div”)选择所有的div元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)选择所有元素 |
| E1,E2,E3 | 分组匹配元素 | 集合元素 | $(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素 |
2、层次选择器
| 选择器 | 描述 | 返回值 | 示例 |
| $(“E1 E2”) | 选择E1下所有E2 | 集合元素 | $(“div span”)选择div下所有span |
| $(“E1> E2”) | 选择E1下的子E2,不包含E2下满足的元素 | 集合元素 | $(“div > span”)选择div下的span元素，不包含span下的span元素 |
| $(“E1+ E2”) | 选择E1后紧相邻的E2 | 集合元素 | $(“.one + div”)选择class=one的下一个div元素 |
| $(“E1~ E2”) | 选择E1之后的所有E2 | 集合元素 | $(“#one ~ div”)选择id为one后的所有div元素 |
| 补充说明： $(“E1 + E2”)可以用$(E1).next(E2)代替 $(“E1 ~ E2”)可以用$(E1).nextAll(E2)代替 | |||
-
<body>
-
<div>hhhh<
/div>
-
<span>hello 0</span>
-
<div class=
"box">hello div<
/div>
-
<span>hello span1 <b>hhhh </b><
/span>
-
<span>hello span2</span>
-
<b>hh b<
/b>
-
</body>
-
<script>
-
$(document).ready(function () {
-
// $(
".box+span").css(
"color",
"red");
-
// $(
".box~span").css(
"color",
"gold");
-
//兄弟间查找方法
-
// $(
".box").next().css(
"background-color",
"blue");
-
// $(
".box").next(
"span").css(
"background-color",
"blue");
-
// $(
".box").nextAll().css(
"color",
"green");
-
// $(
".box").nextAll(
"b").css(
"color",
"green");
-
-
// $(
".box").prev().css(
"color",
"pink");
-
// $(
".box").prev(
"span").css(
"color",
"pink");
-
// $(
".box").prevAll().css(
"background-color",
"green");
-
$(
".box").prevAll(
"span").css(
"background-color",
"green");
-
});
-
</script>
3、过滤选择器
（1）基本的过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选择第1个元素 | 单个元素 | $(“div:first”)选择第1个div元素 |
| :last | 选择最后1个元素 | 单个元素 | $(“div:last”)选择最后1个div元素 |
| :not(E1) | 去除所有E1选择器匹配的元素 | 集合元素 | $(“input:not(.my)”)选择class不是.my的所有input元素 |
| :even | 选择索引是偶数的所有元素，索引从0开始 | 集合元素 | $(“tr:even”)选择表格中所有偶数的行 |
| :odd | 选择索引是奇数的所有元素，索引从0开始 | 集合元素 | $(“tr:odd”)选择表格中所有奇数的行 |
| :eq(index) | 选择索引值是index的元素，index从0开始 | 单个元素 | $(“tr:eq(1)”)选择表格行索引等于1的行 |
| :gt(index) | 选择索引值大于index的元素,index从0开始 | 集合元素 | $(“tr:gt(1) ”)选择表格行索引大于1的行 |
| :lt(index) | 选择索引值小于index的元素,index从0开始 | 集合元素 | $(“tr:lt(1)”)选择表格行索引小于1的行 |
| :header | 所取所有的标题元素,h1~h6 | 集合元素 | $(“:header”)选择网页中所有的<h1>,<h2>…<h6> |
| :animated | 选择当前正在执行动画的所有元素 | 集合元素 | $(“div:animated”)选择正在执行动画的div元素 |
-
<body>
-
<ul>
-
<li>无序列表
1<
/li>
-
<li>无序列表2</li>
-
<li>无序列表
3<
/li>
-
</ul>
-
<ol>
-
<li>有序列表<
/li>
-
<li>有序列表</li>
-
<li>有序列表<
/li>
-
<li>有序列表</li>
-
<
/ol>
-
</body>
-
<script>
-
$(document).ready(function () {
-
// $(
"ul li:first").css(
"color",
"red");
//文档里的第一个li元素 唯一
-
// $(
"ul li").first().css(
"color",
"blue");
-
// $(
"ul li:last").css(
"color",
"red");
-
// $(
"ul li").last().css(
"font-size",
"30px");
-
// $(
"li:odd").css(
"background-color",
"red");
//文档里【索引为奇数】li
-
// $(
"li:eq(0)").css(
"color",
"red");
-
// $(
"li").e
q(0).css(
"color",
"red");
-
// $(
"li:lt(3)").css(
"color",
"green");
//索引小于
3的li
-
$(
"li:gt(3)").css(
"color",
"green");
//索引大于
3的li
-
-
// $(
"ul li:first-child").css(
"color",
"red");
//每一组里的第一个li子元素 可能是多个
-
// $(
"ul li:last-child").css(
"color",
"red");
-
// $(
"ul li:nth-child(odd)").css(
"background-color",
"red");
//每一组里【第奇数】个li
-
});
-
-
// get() 与 e
q() 区别
-
// 都是jquery对象调用 jquery对象.get(索引) jquery对象.e
q(索引)
-
-
// 不同点：
-
// jquery对象.get(索引) dom对象
-
// jquery对象.e
q(索引) jquery对象
-
</script>
（2）内容过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
| :contains(text) | 选择含有text文本内容的元素 | 集合元素 | $(“div:contains(‘我’)”)选择内容里包含我的所有div |
| :empty | 选择不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)选择不包含子元素（含文本）的所有div元素 |
| :has(E1) | 选择包含有(E1选择器匹配的元素)的所有元素 | 集合元素 | $(“div:has(p)”)选择含有p元素的所有div元素 |
| :parent | 选择含有子元素或文本的元素 | 集合元素 | $(“div:parent”)选择拥有子元素（包含文本）的所有div元素 |
（3）子元素过滤选择器
| 选择器 | 功能描述 | 返回值 | 简单示例 |
| :nth-child(index/even/odd) | 选取每个父元素下的第index个子元素或奇偶元素.(index从1开始） | 集合元素 | :eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始. |
| :first-child | 选择每个父元素的第1个子元素 | 集合元素 | :first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如: $(“ul li:first-child”)选择每个ul下的第一个<li> |
| :last-child | 选取每个父元素的最后1个子元素 | 集合元素 | $(“ul li:last-child”)选择每个ul下的最后一个<li> |
| :only-child | 如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配 | 集合元素 | $(“ul li:only-child”)在<ul>中选取是惟一子元素的<li> |
:nth-child()选择器详细功能描述:
- :nth-child(even)能选择每个父元素下的索引值是偶数的元素
- :nth-child(odd)选择出每个父元素下的索引值是奇数的元素
- :nth-child(2)选取每个父元素下的索引值等于2的元素
- :nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始
- :nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始
4、表单选择器
| 选择器 | 描述 | 返回值 | 示例 |
| :input | 匹配所有<input> <textarea> <select> <button>元素 | 集合元素 | $(“:input”) 同描述 |
| :text | 选择所有单行文本框 | 集合元素 | $(“:text”)匹配所有单行文本框 |
| :password | 选择所有密码框 | 集合元素 | $(“:password”) |
| :radio | 选择所有单选框 | 集合元素 | $(“:radio”) |
| :checkbox | 选择所有复选框 | 集合元素 | $(“:checkbox”) |
| :submit | 匹配所有提交按钮 | 集合元素 | $(“:submit”) |
| :image | 匹配所有图像按钮 | 集合元素 | $(“:image”) |
| :reset | 匹配所有重置按钮 | 集合元素 | $(“:reset”) |
| :button | 匹配所有按钮 | 集合元素 | $(“:button”) |
| :file | 匹配所有文件域 | 集合元素 | $(“:file”) |
| :hidden | 匹配所有不可见元素 | 集合元素 | $(“:hidden”) |
选择器中的一些注意事项：
1、特殊符号的处理
“.”、”#”、”(“、”]”
示例：
<div id=“id#b”>www.baidu.com</div>
<div id=“id[1]”>hello</div>
正确的写法：使用转义符\\将特殊符号转义 $(“#id\\#b”) $(“#id\\[1\\]”)
2、选择器中包含空格
选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.
如: $(“div:input”) 和 $(“div :input”)
七、jQuery中的方法初探
| 方法 | 功能描述 |
| show() | 显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒 |
| hide() | 隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒 |
| css(name,value) | 给匹配的元素设置css样式 |
| text(string) | 获取或设置匹配元素的文本内容,不包含html标签 |
| filter(expr) | 筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。 |
| addClass(class) | 为匹配的元素增加一个 类样式 |
| removeClass(class) | 为匹配的元素移除一个类样式 |
| html() | 获取或设置匹配元素的内容，包含html标签 |
| siblings() | $(“.abc”).siblings()匹配得到class=abc的其它兄弟元素 |
1、操作样式
（1）设置
设置单条样式 .css(“属性名”，”属性值”)
设置多条样式 .css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})
（2）获取样式
获取样式值 .css(“属性名”)
增加类 可增加/删除多个类
.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
.removeClass(“”)
.toggleClass(“”)
.toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值
-
<script>
-
$(function () {
-
$(
".box").addClass(
"bg");
//添加类
-
$(
"button").bind(
"click", function () {
-
// $(
".box").removeClass(
"bg box");
//删除类
-
// $(
".box").removeClass();
//清空
-
// $(
".box").toggleClass(
"fz box");
-
// $(
".box").toggleClass();
//removeClass()
-
// $(
".box").toggleClass(
"bg", false);
//removeClass()
-
$(
".box").toggleClass(
"fz", true);
//addClass()
-
});
-
-
// $(
"button").mouseover(function (ev) {}).mouseout(function(){});
-
// $(
"button").bind(
"mouseover mouseout", function (ev) {
-
// // console.log(ev);
//event事件对象
-
//
if (ev.type ===
"mouseover") {
-
// $(this).css(
"background-color",
"red");
-
// }
else
if (ev.type ===
"mouseout") {
-
// $(this).css(
"background-color",
"");
-
// }
-
// });
-
// $(
"button").bind({
-
// mouseover: function () {
-
// $(this).css(
"background-color",
"red");
-
// },
-
// mouseout: function () {
-
// $(this).css(
"background-color",
"");
-
// },
-
// });
-
});
-
-
// jquery对象.bind(
"事件名1 事件名2 ...", function () {});
-
// jquery对象.bind({ 事件名
1: function () {}, 事件名
1: function () {} });
-
</script>
2、 操作元素中的内容：
（1）设置：
- .html(“str”) 设置元素的里面的内容 可用带html标签 js中的innerHTML
- .text(“str”) 设置元素的里面的内容 可用不带html标签 js中的innerText
- .val(“str”) 设置表单的值
3、.html(),.text()和.val()的差异总结：
（1） .html(),.text(),.val()三种方法都是用来读取选定元素的内容；
- 只不过.html()是用来读取元素的html内容（包括html标签），
- .text()用来读取元素的纯文本内容，包括其后代元素，
- .val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上
(2）.html()方法使用在多个元素上时，只读取第一个元素；
- .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，
- 但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
(3) .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
(4 ).html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
例如：$('li').html(function(n){return "被点击的元素的索引值是"+n}); 将会把所有li元素内的内容替换为返回值，并会把n值变成每个li对应的索引值
八、动画
show(speed,[callback]) //显示
hide( speed,[callback] ) //隐藏
toggle(speed,[callback])
-
<script>
-
$(
document).
ready(
function (
) {
-
// $(".box h2").click(function () {
-
// var $dis = $(this).next(".list").css("display");
-
// if ($dis === "none") {
-
// $(this).next(".list").css("display", "block");
-
// $(this).children(".sj").css("transform", "rotate(90deg)");
-
// } else {
-
// $(this).next(".list").css("display", "none");
-
// $(this).children(".sj").css("transform", "rotate(0deg)");
-
// }
-
// });
-
-
$(
".box h2").
click(
function (
) {
-
var list = $(
this).
next(
".list");
//当前点击的h2后的那一个ul
-
list.
toggle(
200);
-
-
// list.show(5000, function () {
-
// // console.log(this);
-
// $(this).hide(2000); //指向的是有动画的jquery对象
-
// }); //回调函数
-
// $(this).next(".list").hide(5000);
-
});
-
});
-
-
// 显示与隐藏
-
// jquery对象.show(参数1，参数2)
-
// 参数1：可选 动画持续时间
-
// 参数2：可选 回调函数 动画执行完后调用的函数
-
-
// jquery对象.hide(参数1，参数2)
-
// 参数1：可选 动画持续时间
-
// 参数2：可选 回调函数 动画执行完后调用的函数
-
-
// jquery对象.toggle(参数1，参数2)
-
// 参数1：可选 动画持续时间
-
// 参数2：可选 回调函数 动画执行完后调用的函数
-
</script>
参数：
speed： 设置显示/隐藏时的速度值，可为fast，slow或毫秒值
callback：显示或隐藏动作完成后调用的函数
toggle()方法：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）
slideUp(speed,[callback] )//往上滑动
slideDown(speed,[callback] ) //往下滑动
slideToggle() fadeIn(speed,[callback] )
fadeOut(speed,[callback] ) // 从看得见到看不见 淡出 1-0
fadeIn(speed,[callback]) // 从看不见到看得见 淡入 0-1
fadeTo(speed,opacity,[callback]) //设置淡入淡出效果到一定的不透明度 fadeToggle()
-
<script>
-
$(
function (
) {
-
// $(".box h2").click(function(){})
-
$(
".box h2").
bind(
"click",
function (
) {
-
//淡入淡出
-
// 从看不见到看得见 淡入 0-1 fadeIn()
-
// 从看得见到看不见 淡出 1-0 fadeOut()
-
// $(".list").fadeIn(5000).fadeOut(2000);
-
// $(".list").fadeToggle(2000);
-
$(
".list").
fadeTo(
2000,
0.5,
function (
) {});
-
-
// 往上滑动 / 往下滑动
-
// $(".list").slideDown(5000, function () {
-
// $(this).slideUp(2000);
-
// });
-
// $(".list").slideToggle("normal");//400
-
// $(".list").slideToggle("slow");//600
-
// $(".list").slideToggle("fast"); //200
-
// $(".list").slideToggle(400);
-
// $(".list").slideDown(5000).slideUp(5000);
-
// $(".list").slideUp(5000);
-
});
-
// $(".box h2").on("click", function () {
-
// console.log(111);
-
// });
-
// dom.addEventListener("click",function(){})
-
});
-
</script>
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
