1、引用
<head>
<script src="jquery.js"></script>
</head>2、名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。3、基本语法
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素4、选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");$("*") 选取所有元素 在线实例
$(this) 选取当前 HTML 元素 在线实例
$("p.intro") 选取 class 为 intro 的 <p> 元素 在线实例
$("p:first") 选取第一个 <p> 元素 在线实例
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素 在线实例
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素5、事件触发
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>方法 描述
bind() 向元素添加事件处理程序
blur() 添加/触发失去焦点事件
change() 添加/触发 change 事件
click() 添加/触发 click 事件
dblclick() 添加/触发 double click 事件
delegate() 向匹配元素的当前或未来的子元素添加处理程序
die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error() 在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace 返回当事件被触发时指定的命名空间
event.pageX 返回相对于文档左边缘的鼠标位置
event.pageY 返回相对于文档上边缘的鼠标位置
event.preventDefault() 阻止事件的默认行为
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation() 阻止其他事件处理程序被调用
event.stopPropagation() 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target 返回哪个 DOM 元素触发事件
event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type 返回哪种事件类型被触发
event.which 返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey 事件触发时 META 键是否被按下
focus() 添加/触发 focus 事件
focusin() 添加事件处理程序到 focusin 事件
focusout() 添加事件处理程序到 focusout 事件
hover() 添加两个事件处理程序到 hover 事件
keydown() 添加/触发 keydown 事件
keypress() 添加/触发 keypress 事件
keyup() 添加/触发 keyup 事件
live() 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load() 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown() 添加/触发 mousedown 事件
mouseenter() 添加/触发 mouseenter 事件
mouseleave() 添加/触发 mouseleave 事件
mousemove() 添加/触发 mousemove 事件
mouseout() 添加/触发 mouseout 事件
mouseover() 添加/触发 mouseover 事件
mouseup() 添加/触发 mouseup 事件
off() 移除通过 on() 方法添加的事件处理程序
on() 向元素添加事件处理程序
one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数
ready() 规定当 DOM 完全加载时要执行的函数
resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件
select() 添加/触发 select 事件
submit() 添加/触发 submit 事件
toggle() 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger() 触发绑定到被选元素的所有事件
triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
unbind() 从被选元素上移除添加的事件处理程序
undelegate() 从现在或未来的被选元素上移除事件处理程序
unload() 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu() 添加事件处理程序到 contextmenu 事件
$.holdReady() 用于暂停或恢复.ready() 事件的执行鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload6、ajax方法
方法 描述
$.ajax() 执行异步 AJAX 请求
$.ajaxPrefilter() 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup() 为将来的 AJAX 请求设置默认值
$.ajaxTransport() 创建处理 Ajax 数据实际传送的对象
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON() 使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript() 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param() 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete() 规定 AJAX 请求完成时运行的函数
ajaxError() 规定 AJAX 请求失败时运行的函数
ajaxSend() 规定 AJAX 请求发送之前运行的函数
ajaxStart() 规定第一个 AJAX 请求开始时运行的函数
ajaxStop() 规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess() 规定 AJAX 请求成功完成时运行的函数
load() 从服务器加载数据，并把返回的数据放置到指定的元素中
serialize() 编码表单元素集为字符串以便提交
serializeArray() 编码表单元素集为 names 和 values 的数组7、超链接切换图片不跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/eventtrigger.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
var test = new EventTrigger();
test.homePage();
})
</script>
<h1>This is first title</h1>
<ul>
<li>
<a href="imgs/page1.jpg" onclick="return false;" title="Page1">Page1 display</a>
</li>
<li>
<a href="imgs/page2.jpg" onclick="return false;" title="Page2">Page2 display</a>
</li>
<li>
<a href="imgs/page3.jpg" onclick="return false;" title="Page3">Page3 display</a>
</li>
</ul>
<img id="default" src="imgs/default.jpg" alt="gallery" style="width: 200px; height: 150px">
</body>
</html>/**
* Created by Hou on 2016/11/11.
*/
function EventTrigger() {}
EventTrigger.prototype.homePage = function () {
$('ul > li').click(function () {
$('#default').attr("src",$(this).find("a").attr("href"));
})
}8、常用效果
隐藏和显示
jQuery hide()
jQuery hide()淡入淡出
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()滑动
jQuery slideDown()
jQuery slideUp()
jQuery slideToggle()动画
jQuery animate() 方法允许您创建自定义的动画。jQuery stop() 方法用于在动画或效果完成前对它们进行停止。使用 callback 实例
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});jQuery - 链(Chaining)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);获取内容和属性/设置内容和属性
text()、html() 以及 val()、attr()
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("button").click(function(){
alert($("#runoob").attr("href"));
});
text()、html() 以及 val()、attr()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});添加元素
append() - 在被选元素的结尾插入内容（元素中）
prepend() - 在被选元素的开头插入内容（元素中）
after() - 在被选元素之后插入内容（元素外）
before() - 在被选元素之前插入内容（元素外）删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性返回 CSS 属性
$("p").css("background-color");
设置 CSS 属性
$("p").css("background-color","yellow");
设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()9、jQuery 尺寸
遍历 - 祖先
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。遍历 - 后代
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。遍历 - 同胞(siblings)
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。遍历- 过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。10、静态绑定和动态绑定
在修改了元素的id之后，就需要使用动态绑定
$(document).on("click", "#logoutBtn", function (e) {
//发送后台注销请求
if ($(this).attr("id")=="logoutBtn") {
$('#loginStatus').hide();
$('#loginForm').show();
$('#logoutBtn').css("height", "73px");
$('#logoutBtn').text("登录");
$('#logoutBtn').attr("class", "btn btn-primary");
$(this).attr("id", "loginBtn");
$('#userInput').val("");
$('#pwdInput').val("");
}
});
7587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
