jQuery 学习01——定义、安装引用、语法、选择器及事件 - 不见花落

jQuery 学习01——定义、安装引用、语法、选择器及事件

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示： 除此之外，Jquery还提供了大量的插件。

jQuery 版本 2 以上不支持 IE6，7，8 浏览器。

如果需要支持 IE6/7/8，那么请选择1.9

可以通过条件注释在使用 IE6/7/8 时只包含进1.9。

<!--[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.com 下载 jQuery 库）

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

例：百度 CDN:

<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide()     // 隐藏当前元素
$("p").hide()      // 隐藏所有 <p> 元素
$("p.test").hide() // 隐藏所有 class="test" 的 <p> 元素
$("#test").hide()  // 隐藏所有 id="test" 的元素

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

提示：简洁写法（与以上写法效果相同）:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

（1）元素选择器——基于元素名选取元素

例：用户点击按钮后，所有 <p> 元素都隐藏：

$(document).ready(function(){
  $("buttom").click(function(){
    $("p").hide();
  }); 
})

（2） #id 选择器——通过 HTML 元素的 id 属性选取指定的元素( id 是唯一的)

例：用户点击按钮后所有带有 id="test" 属性的元素都隐藏：

$(document).ready(function(){
  $("buttom").click(function(){
    $("#test").hide();
  }); 
})

（3） #id 选择器——通过 HTML 元素的class属性选取指定的一或多个元素(class可以多个)

例：用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

$("*")
$(this)
$("p.intro")
$("p:first")
$("ul li:first")
$("ul li:first-child")
$("[href]")
$("a[target='_blank']")
$("a[target!='_blank']")
$(":button")
$("tr:even")
$("tr:odd")

选取所有元素
选取当前 HTML 元素
选取 class 为 intro 的 <p> 元素
选取第一个 <p> 元素
选取第一个 <ul> 元素的第一个 <li> 元素
选取每个 <ul> 元素的第一个 <li> 元素
选取带有 href 属性的元素
选取所有 target 属性值等于 "_blank" 的 <a> 元素
选取所有 target 属性值不等于 "_blank" 的 <a> 元素
选取所有 type="button" 的 <input> 元素和 <button> 元素
选取偶数位置的 <tr> 元素
选取奇数位置的 <tr> 元素

独立文件中使用 jQuery 函数

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件：

鼠标事件：click单击\dblclick双击\mouseenter鼠标指针穿过元素\mouseleave鼠标指针离开元素
键盘事件：keypress\keydown\keyup
表单事件：submit\change\focus元素获得焦点\blur元素失去焦点
文档窗口事件：load\resize\scroll\unload

jQuery 事件方法语法

1.页面中指定一个点击事件：$("p").click();

2.下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

常用的 jQuery 事件方法

（1）$(document).ready()：允许我们在文档完全加载完后执行函数

（2）click()：当按钮点击事件被触发时会调用一个函数

例：当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

（3）dblclick()：当双击元素时，会发生 dblclick 事件

例：当双击某个 <p> 元素时，触发事件，隐藏当前的 <p> 元素：

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

（4）mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件

例：鼠标移到了 id="p1" 的元素上，会看到弹窗“提示：您的鼠标移到了 id="p1" 的元素上!”

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

（5）mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件

例：鼠标离开 id="p1" 的元素，会看到弹窗“提示：再见，您的鼠标离开了该段落。”

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

（6）mousedown()：当鼠标移动到元素上方，并按下鼠标按键时，会发生mousedown事件

例：当鼠标在 id="p1" 的元素上并按下鼠标按键时，会看到弹窗“提示：鼠标在段落上按下。”

$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在段落上按下。");
  });
});

（7）mouseup()：当在元素上松开鼠标按钮时，会发生mouseup事件

例：在 id="p1" 的元素上松开鼠标按钮时，会看到弹窗“提示：鼠标在段落上松开。”

$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});

（8）hover()：用于模拟光标悬停事件

例：当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);
    当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave);

$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("你进入了 p1!");
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");
        }
    )
});

（9）focus()：当元素获得焦点时，发生 focus 事件。blur()：当元素失去焦点时，发生 blur 事件。

注：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

posted on 2017-08-30 10:06 不见花落阅读(172) 评论(0) 编辑收藏举报

刷新页面返回顶部