2018-06-09jQuery10 分钟读完 (大约 1494 个字)

jQuery学习笔记（一）

学习一下jquery

jquery入门

jquery 是一个js库，它简化了js编程。

jquery实例：

jquery入口函数

$(document).ready(function() {
    $("div").click(function() {
        $(this).hide();
    });
});

$(function() {
    $("div").click(function() {
        $(this).hide();
    });
});

jquery前置知识：

html
css
javascript

jquery的功能有：

html元素抓取
html元素操作
css操作
html事件函数
js特效和动画
html DOM的遍历和修改
ajax
utilities

使用jquery主要因为用jquery的企业多。

关于jquery对IE的支持：

jquery2以上不支持IE6.，7，8。
如果要支持IE6.，7，8，选择jquery1.9.

一般使用jquery1.x就可以了。

条件注释，判断IE版本自动选择jquery版本：

<!--[if lt IE 9]>
    <script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

jquery安装

下载

jquery分为开发环境版本（未压缩）和生产环境版本（已压缩），从jquery官网下载：https://jquery.com/download/ 。

引入

方法一：

将下载的 jquery.js 文件放到项目目录下。

html中引入：

1	<script src="jquery.js"></script>

html5中引入js不需要加上 type="text/javascript" 。

方法二：

使用静态资源cdn，比如75cdn。

使用cdn的好处是如果用户之前访问了某些网站加载过jquery文件则无需再次加载。

1	<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.js"></script>

控制台查看页面使用的jquery版本：

1	$.fn.jquery

jquery语法

基本语法

通过jquery，我们可以选取（query）页面元素，并对元素进行操作（actions）。

jquery基础语法：

$(selector).action();
// 美元符号定义了jquery
// selector使用css选择器语法选取html元素
// action()对选取的元素执行一些操作

实例：

1 2	$(this).hide(); $("p.test").hide();

文档就绪事件

所有的jquery代码都要写在文档就绪事件函数中（或者说jquery入口函数）。

jquery入口函数是在DOM全都加载完毕后执行。

<!--引入jquery-->
<script src="js/jquery.js" type="text/javascript"></script>

<!--写法一-->
<script type="text/javascript">
    $(document).ready(function() {
        // jquery code
    });
</script>

<!--写法二-->
<script type="text/javascript">
    $(function() {
        // jquery code
    });
</script>

js入口函数：在DOM以及所有外部资源都加载完毕后执行

1
2
3

window.onload = function() {
    // js code
}

jquery选择器

jquery选择器可以对单个元素或者多个元素进行操作。

jquery除了支持css选择器之外，还有自己的选择器。

下面是常用的jquery选择器：

$("*")
$(this)
$("tag")
$("#id")
$(".class")
$("tag.class")
$("tag#id")
$("p:first") // 选取第一个p元素
$("ul li:first") // 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") // 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")
$("a[target='_blank']")
$("a[target!='_blank']")
$(":button") // 	选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") // 选取偶数位置的 <tr> 元素
$("tr:odd") // 选取奇数位置的 <tr> 元素
$("#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）
$("div p:eq(2)") // 索引选择器div下的第三个p元素（索引是从0开始）
$("p:contains(test)") // 内容过滤选择器，包含text内容的p元素
$(":empty") // 内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent相反
$(":hidden") // 所有隐藏元素
$("input:enabled") // 选取所有启用的表单元素
$(":disabled") // 所有不可用的元素
$("input:checked") // 获取所有选中的复选框单选按钮等
$("select option:selected") // 获取选中的选项元素

tips：

最好将jquery代码放入一个单独的js文件中。

比如：

<head>
    <script src="jquery.js"></script>
    <script src="js/my_jquery_code.js"></script>
</head>

jquery事件

常用的jquery事件

常用的jquery事件：

鼠标事件：

click
dblclick
mouseenter
mouseleave
hover

键盘事件：

keypress：按下触发，返回ascii代码，对于修饰键无效。
keydown：只要按着就不停地触发，返回按键代码。
keyup：松开按键触发，返回按键代码。

表单事件：

submit
change
focus
blur

窗口事件：

load
resize
scroll
unload

jquery事件方法语句

1
2
3

$("input").click(function() {
    // actions
});

jquery常用事件方法

$(document).ready()

jquery入口函数。

click()

元素被点击时触发函数。

1
2
3

$("p").click(function() {
    $(this).hide();
});

dblclick()

双击元素触发函数。

1
2
3

$("p").dblclick(function() {
    $(this).hide();
});

mouseenter()

鼠标指针进入元素时触发。

1
2
3

$("#p1").mouseenter(function() {
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseleave()

鼠标指针离开元素的时候触发。

1
2
3

$("#p1").mouseleave(function() {
    alert("再见，您的鼠标离开了该段落。");
});

除此之外还有：

mousedown()：按下鼠标时触发
mouseup()：松开鼠标时触发
hover()：悬停时触发
focus()：获取焦点时触发
blur()：失去焦点时触发

tips

keypress, keydown, keyup的区别:
1.keydown：在键盘上按下某键时发生, 一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 , 换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

实例：拿到按下的键的按键代码

1
2
3

$(window).keydown(function() {
    var val = event.which;
});

实例：给事件处理函数传递参数，语法： jQueryObject.keypress( [[ data ,] handler ] );

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;
});