基础知识
简介
- jQuery是一个快速、简洁的JavaScript框架。
- jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
- jQuery封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery本质上就是一些js文件,封装了js的原生代码而已。
- jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
安装
- 下载JQuery
- 目前jQuery有三个大版本
- 1.x
- 兼容ie678,使用最为广泛的,官方只做BUG维护,
- 功能不再新增。因此一般项目来说,使用1.x版本就可以了。
- 2.x
- 不兼容ie678,很少有人使用,官方只做BUG维护,
- 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。
- 3.x
- 不兼容ie678,只支持最新的浏览器。
- 除非特殊要求,一般不会使用3.x版本的,因为很多老的jQuery插件不支持这个版本。
- 目前该版本是官方主要更新维护的版本。
- 每个大版本包括两个小版本
- jquery.js
- Development version(开发版本) - 用于测试和开发。
- 给程序员看的,有良好的缩进和注释,体积大一些,程序加载较慢。
- jquery.min.js
- Production version(生产版本)- 用于实际的网站中,已被精简和压缩。
- 在程序中使用,没有缩进,体积小一些,程序加载更快。
- 导入JQuery的js文件
- 引入Jquery资源
- 请注意,<script> 标签应该位于页面的 <head> 部分。
<head>
<script
type="text/javascript"
src="jquery.js">
</script>
</head>
基础语法
- $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
文档就绪函数
- 这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
- 如果在文档没有完全加载之前就运行函数,操作可能失败。
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
$(document).ready(function(){
});
$(function(){
});
转换
- JQuery对象在操作时,更加方便。
- JQuery对象和js对象方法不通用
- 两者相互转换
- Jquery – > JS
- Jquery对象[索引]
- Jquery对象.get(索引)
- JS – > Jquery
选择器
- jQuery选择器允许您对元素组或单个元素进行操作。
- jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
- jQuery选择器允许您对 HTML 元素组或单个元素进行操作。
- 在 HTML DOM 术语中:jQuery选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
基本选择器
选择器 | 实例 | 描述 |
---|
* | $("*") | 所有元素 |
this | $(this) | 当前 HTML 元素 |
#id | $("#lastname") | id=“lastname” 的元素 |
.class | $(".intro") | 所有 class=“intro” 的元素 |
.class.class | $(".intro.demo") | 所有 class=“intro” 且 class=“demo” 的元素 |
element | $(“p”) | 所有 <p> 元素 |
element.class | $(“p.intro”) | 所有 class=“intro” 的 <p> 元素 |
element#id | $(“p#demo”) | 所有 id=“demo” 的 <p> 元素。 |
| | |
s1,s2,s3 | $(“th,td,.intro”) | 所有带有匹配选择的元素 |
层级选择器
选择器 | 实例 | 描述 |
---|
super sub | $(“table tr”) | 选择 <table>元素内部的所有 <tr>元素(不仅是子元素) |
super > sub | $(“table > tr”) | 选择 <table>元素内部的所有 <tr>子元素 |
属性选择器
- jQuery 使用 XPath 表达式来选择带有给定属性的元素。
选择器 | 实例 | 描述 |
---|
[atribute] | $("[href]") | 所有带有 href 属性的元素 |
[[attribute = value]] | $("[href=’#’]") | 所有 href 属性的值等于 “#” 的元素 |
[[attribute != value]] | $("[href!=’#’]") | 所有 href 属性的值不等于 “#” 的元素 |
[[*attribute *$= value]] |
(
"
[
h
r
e
f
("[href
("[href=’.jpg’]") | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
过滤选择器
选择器 | 实例 | 描述 |
---|
[:first] | $(“p:first”) | 第一个 <p> 元素 |
[:last] | $(“p:last”) | 最后一个 <p> 元素 |
[:even] | $(“tr:even”) | 所有偶数 <tr> 元素 |
[:odd] | $(“tr:odd”) | 所有奇数 <tr> 元素 |
| | |
[:eq(index)] | $(“ul li:eq(3)”) | 列表中的第四个元素(index 从 0 开始) |
[:gt(no)] | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
[:lt(no)] | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| | |
[:empty] | $(":empty") | 无子(元素)节点的所有元素 |
:not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
[:header] | $(":header") | 所有标题元素 <h1> - <h6> |
[:contains(text)] | $(":contains(‘W3School’)") | 包含指定字符串的所有元素 |
| | |
:hidden | $(“p:hidden”) | 所有隐藏的 <p> 元素 |
[:visible] | $(“table:visible”) | 所有可见的表格 |
表单过滤选择器
选择器 | 实例 | 描述 |
---|
[:input] | $(":input") | 所有 <input> 元素 |
[:text] | $(":text") | 所有 type=“text” 的 <input> 元素 |
[:password] | $(":password") | 所有 type=“password” 的 <input> 元素 |
[:radio] | $(":radio") | 所有 type=“radio” 的 <input> 元素 |
[:checkbox] | $(":checkbox") | 所有 type=“checkbox” 的 <input> 元素 |
[:submit] | $(":submit") | 所有 type=“submit” 的 <input> 元素 |
[:reset] | $(":reset") | 所有 type=“reset” 的 <input> 元素 |
[:button] | $(":button") | 所有 type=“button” 的 <input> 元素 |
[:image] | $(":image") | 所有 type=“image” 的 <input> 元素 |
[:file] | $(":file") | 所有 type=“file” 的 <input> 元素 |
| | |
[:enabled] | $(":enabled") | 所有激活的 input 元素 |
[:disabled] | $(":disabled") | 所有禁用的 input 元素 |
[:selected] | $(":selected") | 所有被选取的 input 元素 |
[:checked] | $(":checked") | 所有被选中的 input 元素 |
事件函数
- jQuery 事件处理方法是 jQuery 中的核心函数。
- 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 术语由事件“触发”(或“激发”)经常会被使用。
- 如果你的网站包含许多页面,为了让 jQuery 函数易于维护,需要将 jQuery 函数放到独立的 .js 文件中。
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
鼠标事件
事件 | 描述 |
---|
click | 当单击元素时 |
dbclick | 当双击元素时 |
mouseenter | 当鼠标指针穿过(进入)被选元素时 |
mouseleave | 当鼠标指针离开被选元素时 |
hover | 当鼠标指针悬停在被选元素上时 |
键盘事件
事件 | 描述 |
---|
keydown | 键按下的过程 |
keypress | 键被按下 |
keyup | 键被松开 |
表单事件
事件 | 描述 |
---|
submit | 当提交表单时 |
change | 当元素的值改变时发生 change 事件 (仅适用于表单字段) |
focus | 当元素获得焦点时 (当通过鼠标点击选中元素或通过 tab 键定位到元素时) |
blur | 当元素失去焦点时 |
窗口事件
事件 | 描述 |
---|
resize | 当调整浏览器窗口大小时 |
scroll | 当用户滚动指定的元素时 |
DOM操作
- jQuery 中非常重要的部分,就是操作 DOM 的能力。
- jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
- 提示:DOM = Document Object Model(文档对象模型)
内容操作方法
- html()
- 获取/设置元素的标签体内容(包括 HTML 标记)
- text()
- val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
属性操作方法
- 通用属性操作
- attr()
- 获取/设置元素的属性
- 如果操作的是元素自定义的属性,则建议使用attr
- removeAttr()
- prop()
- 获取/设置元素的属性
- 如果操作的是元素的固有属性,则建议使用prop
- removeProp()
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
- 对class属性操作
-
addClass()
-
removeClass()
-
toggleClass()
- 切换class属性
- toggleClass(“one”):
- 如果元素对象上存在class=“one”,则将属性值one删除掉。
- 如果元素对象上不存在class=“one”,则添加。
-
css()
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
文档操作方法
- append()
- 父元素将子元素追加到末尾
- A.append(B)
- 将B添加到A元素内部,并且在末尾。
- prepend()
- 父元素将子元素追加到开头
- A.prepend(B)
- 将B添加到A元素内部,并且在开头。
- appendTo()
- 子元素将父元素追加到末尾
* A.appendTo(B)
* 将A添加到B内部,并且在末尾。
- prependTo()
- 子元素将父元素追加到开头
- A.prependTo(B)
- 将A添加到B内部,并且在开头。
- after()
- 添加元素2到元素1后边
* A.after(B)
* 将B添加到A后边(兄弟关系)
- before()
- 添加元素2到元素1前边
* A.before(B)
* 将B添加到A前边(兄弟关系)
- insertAfter()
- 添加元素1到元素2后边
* A.insertAfter(B)
* 将A添加到B后边(兄弟关系)
- insertBefore()
- 添加元素1到元素2前边
* A.insertBefore(B)
* 将A添加到B前边(兄弟关系)
- remove()
- empty()
- 清空元素的所有后代元素。
- A.empty()
- 将对象的后代元素全部清空,但是保留当前A以及其属性节点
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");
$("#div1").remove();
$("p").remove(".italic");
$("#div1").empty();
动画
显示/隐藏
- 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
- show( speed,callback )
- hide( speed,callback )
- 通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
- speed:参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
- callback:参数是隐藏或显示完成后所执行的函数名称。
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("button").click(function(){
$("p").toggle();
});
淡入/淡出
- 通过 jQuery,您可以实现元素的淡入淡出效果。
- fadeIn() 用于淡入已隐藏的元素。
- fadeOut() 用于淡出可见元素。
- fadeToggle() 在淡入淡出之间切换。
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
滑动
- 通过 jQuery,您可以在元素上创建滑动效果。
- slideDown() 用于向下滑动元素。
- slideUp() 用于向上滑动元素。
- slideToggle() 在向下滑动向上滑动之间切换。
$("#flip").click(function(){
$("#panel").slideDown();
});
$("#flip").click(function(){
$("#panel").slideUp();
});
$("#flip").click(function(){
$("#panel").slideToggle();
});
遍历
JS的遍历方式
Jquery的遍历方式
- Jquery对象.each(callback)
- jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element:就是集合中的每一个元素对象
- this:集合中的每一个元素对象
- callback:回调函数返回值
- true:如果当前function返回为false,则结束循环(break)。
- false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
- $.each(object, [callback])
- for…of
var citys = $("#city li");
for (var i = 0; i < citys.length; i++) {
alert(i+":"+citys[i].innerHTML);
if("上海" == citys[i].innerHTML){
}
}
var citys = $("#city li");
citys.each(function (index,element) {
alert(this.innerHTML);
alert($(this).html());
alert(index+":"+element.innerHTML);
alert(index+":"+$(element).html());
if("上海" == $(element).html()){
return true;
}
});
$.each(citys,function (index,element) {
alert($(this).html());
});
for(li of citys){
alert($(li).html());
}
事件绑定
- Jquery标准的绑定方式
- jq对象.事件方法(回调函数)
- 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
- 表单对象.submit();//让表单提交
- on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
- toggle事件切换
- jq对象.toggle(fn1,fn2…)
- 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
- 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
<script
src="../js/jquery-migrate-1.0.0.js"
type="text/javascript"
charset="utf-8">
</script>
插件
- $.fn.extend(object)
- 增强通过Jquery获取的对象的功能 $("#id")
- $.extend(object)