jQuery笔记

JQuery

1.安装

• 下载jar包

• 或者

  npm install jquery
  或者
  yarn add jquery
  

2.jQuery 使用版本

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本

3.jQuery 语法

3.1通过选取 HTML 元素，并对选取的元素执行某些操作。

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

实例:

• $(this).hide() - 隐藏当前元素

• $("p").hide() - 隐藏所有

  元素

• $("p.test").hide() - 隐藏所有 class="test" 的

  元素

• $("#test").hide() - 隐藏 id="test" 的元素

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

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。可多次执行且不会被覆盖

• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。只能执行一次，多次执行会被覆盖

4.事件

dblclick()

当双击元素时，会发生 dblclick 事件。

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()

hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

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

focus()

当元素获得焦点时，发生 focus 事件。

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

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

5.隐藏显示

5.1 jQuery hide() 和 show()

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

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

5.2 jQuery toggle()

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

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

6.淡入淡出

jQuery Fading 方法

fadeIn()

用于淡入已隐藏的元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

fadeOut()

用于淡出可见元素,语法同fadeIn()

fadeToggle()

可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法同fadeIn()

fadeTo()

允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:

$(selector).fadeTo(speed,opacity,callback);

7. 上下滑动

slideDown()

用于向下滑动元素。

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

slideUp()

用于向上滑动元素,语法同上

slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

8.动画

animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

实例

$("button").click(function(){  
    $("div").animate({    left:'250px',  
                      opacity:'0.5',  
                      height:'150px',  
                      '150px'  }); 
});

9.stop()

适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画

10.链

允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

11.获取内容

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

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

11.2 获取属性 - attr()

jQuery attr() 方法用于获取属性值。

$("button").click(function(){ 
    alert($("#runoob").attr("href"));
});

** prop()函数的结果:**

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

12. 设置内容 - text()、html() 以及 val()

12.1我们将使用前一章中的三个相同的方法来设置内容：

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

• html() - 设置或返回所选元素的内容（包括 HTML 标记）

• val() - 设置或返回表单字段的值

  $("#btn3").click(function(){

  ​ $("#test3").val("RUNOOB");

  });

12.2 设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

$("button").click(function(){   	
    $("#runoob").attr("href","http://www.runoob.com/jquery"); 
                            });

attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

13. 添加新的 HTML 内容或元素

我们将学习用于添加新内容的四个 jQuery 方法：

内：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容

外：

• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

$("p").prepend("在开头追加文本");

$("body").append(txt1,txt2,txt3); // 追加新元素

上述方法均可用于添加内容或者元素

14. 删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

下面的例子删除 class="italic" 的所有

元素：

$("p").remove(".italic");

15. jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

16. jQuery css() 方法

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

• 返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

• 设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

17. jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

18. 遍历

18.1向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

• parent()：直接父元素

$("span").parent();

• parents()：所有父元素，直至根元素

• parentsUntil()：两者之间的所有祖先元素

$("span").parentsUntil("div");

18.2 向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

• children() 遍历 直接子元素,也可以使用可选参数来过滤对子元素的搜索。
• find() 返回被选元素的后代元素，一路向下直到最后一个后代。

18.3 在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

• siblings() 返回被选元素的所有同胞元素。也可以使用可选参数来过滤对同胞元素的搜索

$("h2").siblings("p");

• next() 返回被选元素的下一个同胞元素
• nextAll() 返回被选元素的所有跟随的同胞元素。
• nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。

$("h2").nextUntil("h6");

• prev()

• prevAll()

• prevUntil()

18.4 过滤

first()

last()

eq() 返回被选元素中带有指定索引号的元素。

下面的例子选取第二个

元素（索引号 1）：

$("p").eq(1);

filter()

返回带有类名 "url" 的所有

元素：

$("p").filter(".url");

not() 与filter()作用相反

AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

1. load()

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$("button").click(function(){ 
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){   
        if(statusTxt=="success")      
            alert("外部内容加载成功!");    
        if(statusTxt=="error")      
            alert("Error: "+xhr.status+": "+xhr.statusText); 
    }); 
});

2.get() 和 post() 方法

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

2.1 $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名

第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

 $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "
状态: " + status);
  });

2.2 $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

 $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: 
" + data + "
状态: " + status);
    });