文章目录
- 1.基础语法
- 2.入口函数
- 3.jQuery选择器
- 元素选择器
- id 选择器
- class 选择器
- 其他实例
- 4.独立文件中使用jQuery
- 5.事件
- 事件是什么
- 语法
- 常见的jQuery事件方法
1.基础语法
Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
2.入口函数
$(document).ready(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
-
试图隐藏一个不存在的元素
-
获得未完全加载的图像的大小
简洁写法（与以上写法效果相同）:
$(function(){
// 开始写 jQuery 代码...
});
jQuery 入口函数与 JavaScript 入口函数的区别：
-
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
-
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
3.jQuery选择器
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 < p> 元素:$(“p”)
用户点击按钮后，所有 < p> 元素都隐藏：
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：$（"#test"）
当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script >
$(document).ready(function(){
$('button').click(function(){
$('#test').hide()
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另一个段落</p>
<button>click me</button>
</body>
</html>
class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
实例
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：
实例
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
$(":button") 为 jQuery 中表单选择器（貌似与过滤选择器同级），旨在选择所有的按钮，所以会找到 < input type=“button”>、< button> 元素；
而 $(“button”) 则为基本选择器，旨在选择为 < button> 的标签。
- :即为 jQuery 的过滤选择器，语法类似于 css 中的伪类选择器；
- 其过滤选择器大概可以分为基本过滤（p:first 之类）、内容过滤（:empty）、子元素过滤(:first-child)和属性过滤[href] 选择器。
其他实例
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 div下的p元素中的span元素
$(div>p) 父子选择器 div下的所有p元素
$(div+p) 相邻元素选择器 div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个（first 或者 last）
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)") 索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") 内容过滤选择器，包含text内容的p元素
$(":emtyp") 内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden") 所有隐藏元素 visible
$("input:enabled") 选取所有启用的表单元素
$(":disabled") 所有不可用的元素
$("input:checked") 获取所有选中的复选框单选按钮等
$("select option:selected") 获取选中的选项元素
4.独立文件中使用jQuery
如果网站包含许多页面，希望 jQuery 函数易于维护，那么把的jQuery 函数放到独立的 .js 文件中。
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
5.事件
事件是什么
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见DOM元素
语法
$("p").click(function(){
// 动作触发后执行的代码!!
});
常见的jQuery事件方法
- dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script >
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击我就消失了</p>
<p >双击我也消失了</p>
</body>
</html>
点一点就不见了
- mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script >
$(document).ready(function(){
$("p").mouseenter(function(){
alert("鼠标移到我上面了！")
});
});
</script>
</head>
<body>
<p>111111</p>
<p >1111111</p>
</body>
- mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$(document).ready(function(){
$("p").mouseleave(function(){
alert("鼠标走掉了")
});
- mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数
$(document).ready(function(){
$("p").mousedown(function(){
alert("鼠标按到我了！")
});
});
- mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数
$(document).ready(function(){
$("p").mouseup(function(){
alert("我被鼠标松开了！")
});
});
- hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script >
$(document).ready(function(){
$('p').hover(
function(){
alert("进来了");
},
function(){
alert("你走了，再见见");
}
)
});
</script>
</head>
<body>
<p>这是要进入的区域</p>
</body>
- focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
- blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<script >
$(document).ready(function(){
$('input').focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff")
});
})
</script>
</head>
<body>
NAME:<input type="text" name="fullname"><br>
EMAIL:<input type="text" name="email">
</body>
</html>
鼠标点击输入框内聚焦，失去焦点还原
- keypress,keydown,keyup的区别:
1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.
案例1:获取按键代码或字符的ASCII码
$(window).keydown( function(event){
// 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.
} );
案例2:传递数据给事件处理函数
jQueryObject.keypress( [[ data ,] handler ] );
- data: 通过event.data传递给事件处理函数的任意数据;
- handler: 指定的事件处理函数;
举例:
// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围.
var validKeys = { start: 65, end: 90 };
$("#keys").keypress( validKeys, function(event){
var keys = event.data; //拿到validKeys对象.
return event.which >= keys.start && event.which <= keys.end;
} );
1. 获取事件对象
$(document).ready(function(){
$(window).keypress(function(event){
//获取事件对象，里面包含各种有用的信息。
console.log(event);
//console.log(event.which);
});
});
2. keypress事件获取键入字符
$(window).keypress(function(event){
//event.which是获取ASCII码，前面的函数是将ASCII码转换成字符，空格键和Enter键输出均为空白。
console.log(String.fromCharCode(event.which));
//从event对象中key属性获取字符，但是Enter键的key值为"Enter"，空白键还是空白" "。
console.log(event.key);
});
