jQuery入门笔记

时间 2019-11-18

标签 jquery 入门笔记栏目 JQuery 繁體版

原文原文链接

一.jQuery下载安装javascript

1.从 jquery.com 下载 jQuery 库（学习推荐用这种方法，能够在没有网络时使用）css

2.从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（这种方法须要网络环境），能够经过 CDN（内容分发网络）引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。若是你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址。html

二.jQuery 语法java

经过 jQuery，您能够选取（查询，query） HTML 元素，并对它们执行"操做"（actions）jquery

jQuery 语法是经过选取 HTML 元素，并对选取的元素执行某些操做。服务器

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

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

实例:app

$(this).hide() - 隐藏当前元素ide
$("p").hide() - 隐藏全部 <p> 元素函数
$("p.test").hide() - 隐藏全部 class="test" 的 <p> 元素
$("#test").hide() - 隐藏全部 id="test" 的元素

例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js" type="text/javascript" charset="UTF-8">
  </script>
</head>
<body>
  <script type="text/javascript">
   $(document).ready(function(){
    $("button").click(function(){
     $("p").hide();    //隐藏p元素
    });
   });
  </script>
  <h2>这是一个标题</h2>
  <p>这是一个段落</p>
  <p>这是另外一个段落</p>
  <button>点我</button>
</body>
</html>

实例中的全部 jQuery 函数位于一个 document ready 函数中的缘由：

这是为了防止文档在彻底加载（就绪）以前运行 jQuery 代码，即在 DOM 加载完成后才能够对 DOM 进行操做。若是在文档没有彻底加载以前就运行函数，操做可能失败。

在实际的操做中，这两种方式的效果是相同的。

1.$(document).ready(function(){

// 开始写 jQuery 代码...

});

2.$(function(){

// 开始写 jQuery 代码...

});

三.介绍一下jQuery的 选择器

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

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

jQuery 中全部选择器都以美圆符号开头：$()。

1.标签选择器（元素选择器）注：jQuery 元素选择器基于元素名选取元素

$(document).ready(function(){
    $("button").click(function(){
     $("p").hide(); //选中全部的p元素进行隐藏
    });
   });

2.ID选择器

jQuery #id 选择器经过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是惟一的，因此您要在页面中选取惟一的元素须要经过 #id 选择器。

经过 id 选取元素语法：$("#test")

实例：

3.类选择器（.class选择器）

jQuery 类选择器能够经过指定的 class 查找元素。

语法：$(".test")

实例：

四，jQuery的事件

1.鼠标事件

click:鼠标点击事件

$("p").click(function(){
alert("段落被点击了。");
});

dblclick：鼠标双击事件

$("p").dblclick(function(){
alert("这个段落被双击。");
});

mouseenter：鼠标进入事件

$("p").mouseenter(function(){
$("p").css("background-color","yellow");
}); //当鼠标指针进入 <p> 元素时，设置背景色为黄色

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。

mouseenter 事件只在鼠标移动到选取的元素上时触发。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="UTF-8">

  </script>
<script>
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
    $(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
    $(".enter span").text(y+=1);
});
});
</script>
</head>
<body>

<p>mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。</p>
<p>mouseenter 事件只在鼠标移动到选取的元素上时触发。 </p>

<div class="over" style="padding:20px;width:250px;float:left">
<h3 style="">Mouseover 事件触发: <span></span></h3>
</div>

<div class="enter" style="padding:20px;width:250px;float:right">
<h3 style="">Mouseenter 事件触发: <span></span></h3>
</div>

</body>
</html>

mouseleave：鼠标离开事件

当鼠标指针离开 <p> 元素时，设置背景色为灰色

$("p").mouseleave(function(){
$("p").css("background-color","gray");
});

2.键盘事件

keypress，keydown，keyup，hover 能够参考菜鸟教程

3.表单事件

submit，change，focus，blur 能够参考菜鸟教程

4.文档/窗口事件

load，resize，scroll，unload 能够参考菜鸟教程

五.jQuery - 获取内容和属性

三个简单实用的用于 DOM 操做的 jQuery 方法：

text() - 设置或返回所选元素的文本内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js" type="text/javascript" charset="UTF-8">

  </script>
  <script>
   $(document).ready(function() {
    $("#btn1").click(function() {
     alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function() {
     alert("HTML: " + $("#test").html());
    });
   });
  </script>
</head>
<body>

  <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
  <button id="btn1">显示文本</button>
  <button id="btn2">显示 HTML</button>

</body>
</html>

运行结果：

html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性 - attr()

六.jQuery 效果

jquery隐藏的方法：hide();
jquery显示的方法：show();
jquery中切换隐藏与显示的方法：toggle();
jquery向下滑的方法：slideDown();
jquery向上滑的方法：slideUp();
jquery中自主建立动画的方法：animate();
jquery中切换向上或向下滑的方法：slidetoggle();
jquery中中止动画的方法：stop();

jQuery 方法连接

注：当进行连接时，代码行会变得很长。不过，jQuery 语法不是很严格；您能够按照但愿的格式来写，包含换行和缩进。

实例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="js/jquery.js" type="text/javascript" charset="UTF-8">

  </script>
  <script>
   $(document).ready(function() {
    $("button").click(function() {
     $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
    });
   });
  </script>
</head>
<body>
  <p id="p1">人之初</p>
  <button>点我</button>
</body>
</html>

隐藏和显示

1.经过 jQuery，您可使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

实例：$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

2.可选的 speed 参数规定隐藏/显示的速度，能够取如下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

语法

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

3.jQuery toggle()

经过 jQuery，您可使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
$("p").toggle();
});

可选的 speed 参数规定隐藏/显示的速度，能够取如下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$(selector).toggle(speed,callback);

jQuery - 添加元素

1.append() - 在被选元素的结尾插入内容

2.prepend() - 在被选元素的开头插入内容

3.after() - 在被选元素以后插入内容

4.before() - 在被选元素以前插入内容

jQuery - 删除元素

1.remove() - 删除被选元素（及其子元素）

$("#div1").remove();

2.empty() - 从被选元素中删除子元素

$("#div1").empty();

jQuery 操做 CSS

1.addClass() - 向被选元素添加一个或多个类

2.removeClass() - 从被选元素删除一个或多个类

3.toggleClass() - 对被选元素进行添加/删除类的切换操做

4.css() - 设置或返回样式属性

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回属性：

$("p").css("background-color");

设置属性：

$("p").css("background-color","yellow");

jQuery 遍历

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的全部祖先元素，它一路向上直到文档的根元素 (<html>)。

parentsUntil() 方法返回介于两个给定元素之间的全部祖先元素

children() 方法返回被选元素的全部直接子元素

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

siblings() 方法返回被选元素的全部同胞元素。

next() 方法返回被选元素的下一个同胞元素。

extAll() 方法返回被选元素的全部跟随的同胞元素

prev(), prevAll() 以及 prevUntil() 方法的工做方式与上面的方法相似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞以前元素遍历，而不是以后元素遍历）

nextUntil() 方法返回介于两个给定参数之间的全部跟随的同胞元素。