-
jQuery简介
- jQuery是一个JavaScript库;
- jQuery下载地址http://jquery.com/download/#Download_jQuery
精简版:即压缩版,删除了代码的空格和空行,功能与原版一致,用于实际发布;
原版:即未压缩版,便于阅读,用于测试,学习,开发. - 将下载过的jQuery文件放到文档目录下,在head中引用后即可使用;
<script src="jquery-3.2.1.js"></script>
-
jQuery基本语法
$(selector).action()
1.$符号定义jQuery;
2.selector定义选择器,查询和选择html元素;
3.action执行对元素的操作;
4.为防止在文档完全加载之前运行jQuery代码,一般将jQuery代码定义在文档就绪函数中;$(document).ready(function(){ --- jQuery 代码 ---- });
-
jQuery选择器
选择器 实例 释义 元素选择器 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素 伪类 :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 的元素 :not(selector) $("input:not(:empty)") 所有不为空的 input 元素 :header $(":header") 所有标题元素 <h1> - <h6> :animated 所有动画元素 :contains(text) $(":contains('W3School')") 包含指定字符串的所有元素 :empty $(":empty") 无子（元素）节点的所有元素 :hidden $("p:hidden") 所有隐藏的 <p> 元素 :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 $(":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事件
方法 描述 语法(参数前带-为可选参数) bind() 为当前元素附加(多个)事件处理器 $(selector).bind(event,-data,function) blur() 失去焦点 $(selector).blur(-function) change() 改变 $(selector).change(-function) click() 点击 $(selector).click(-function) dblclick() 双击 $(selector).dblclick(-function) delegate() 为当前元素的子元素添加事件处理器 $(selector).delegate(childSelector,event,-data,function) die() 移除所有通过live()函数添加的事件处理程序 $(selector).die(event,-function) error() 元素发生错误时 $(selector).error(function) event.isDefaultPrevented() 返回event对象是否调用了event.preventDefault() event.isDefaultPrevented() event.pageX 鼠标位置的x坐标 event.pageX event.pageY 鼠标位置的y坐标 event.pageY event.preventDefault() 阻止事件的默认动作 event.preventDefault() event.result 元素的最后一个事件的返回值 event.result event.target 事件触发的元素 event.target event.timeStamp 返回从 1970 年 1 月 1 日到事件发生时的毫秒数 event.timeStamp event.type 返回事件的类型 event.type event.which 指示按了哪个键盘键或按钮 event.which focus() 获得焦点 $(selector).focus(-function) keydown() 键盘按下 $(selector).keydown(-function) keypress() 输入字符时 $(selector).keypress(-function) keyup() 键盘松开 $(selector).keyup(-function) live() 为元素添加(多个)事件处理器 $(selector).live(event,-data,function) load() 加载完成时 $(selector).load(function) mousedown() 鼠标按下 $(selector).mousedown(-function) mouseenter() 鼠标进入(当前元素) $(selector).mouseenter(-function) mouseleave() 鼠标离开(当前元素) $(selector).mouseleave(-function) mousemove() 鼠标移动 $(selector).mousemove(-function) mouseout() 鼠标离开(当前元素及子元素) $(selector).mouseout(-function) mouseover() 鼠标进入(当前元素及子元素) $(selector).mouseover(-function) mouseup() 鼠标松开 $(selector).mouseup() one() 元素添加只处理一次的事件处理器 $(selector).one(event,-data,function) ready() 文档加载完成 $(document).ready(function) resize() 窗口大小改变时 $(selector).resize(-function) scroll() 元素/窗口滚动时 $(selector).scroll(-function) select() 文本被选择时 $(selector).select(-function) submit() 当提交表单时 $(selector).submit(-function) toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行 $(selector).toggle(function1(),function2(),-functionN(),...) 切换显示/隐藏 $(selector).toggle(-speed,-callback) trigger() 触发元素的某一类型事件 $(selector).trigger(event,-[param1,param2,...]) triggerHandler() 1.不触发默认事件;
2.只触发第一个元素;
3.只针对目标元素;
4.返回值为触发事件的返回值,无触发则返回undefined$(selector).triggerHandler(event,-[param1,param2,...]) unbind() 移除元素(一个)事件处理器 $(selector).unbind(-event,-function) undelegate() 移除delegate()方法添加的事件 $(selector).undelegate(-selector,-event,-function) unload() 离开页面时 event.unload(function)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
button {
background-color: cornflowerblue;
color: white;
padding: 0.5em;
border-radius: 1em;
outline: none;
border: solid 1px lightskyblue;
}
p {
background-color: gainsboro;
padding: 0.5em;
border-radius: 0.5em;
font-family: "楷体";
}
</style>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").mousedown(function() {
$(this).css("background-color", "darkslateblue");
});
$("button").mouseup(function() {
$(this).css("background-color", "cornflowerblue");
});
});
</script>
</head>
<body>
<p title="displayContent">显示与隐藏</p>
<button id="swithDisplay">隐藏</button>
<script type="text/javascript">
$(document).ready(function() {
$("#swithDisplay").bind("click", function() {
$("[title='displayContent']").toggle(500);
if($(this).text()=="隐藏") {
$(this).text("显示");
} else {
$(this).text("隐藏");
}
});
});
</script>
</body>
</html>
test30.gif
