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',  
                      width:'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()

jQuery Dimensions

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 + "\n状态: " + 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("数据: \n" + data + "\n状态: " + status);
    });

posted @ 2020-10-27 16:42 DurianTRY 阅读(123) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

只有一

jQuery笔记

JQuery

1.安装

2.jQuery 使用版本

3.jQuery 语法

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

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

4.事件

dblclick()

mouseenter()

mouseleave()

mousedown()

mouseup()

hover()

focus()

blur()

5.隐藏显示

5.1 jQuery hide() 和 show()

5.2 jQuery toggle()

6.淡入淡出

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

7. 上下滑动

slideDown()

slideUp()

slideToggle() 方法

8.动画

9.stop()

10.链

11.获取内容

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

11.2 获取属性 - attr()

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

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

12.2 设置属性 - attr()

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

14. 删除元素/内容

15. jQuery 操作 CSS

16. jQuery css() 方法

17. jQuery 尺寸方法

18. 遍历

18.1向上遍历 DOM 树

18.2 向下遍历 DOM 树

18.3 在 DOM 树中水平遍历

18.4 过滤

AJAX

1. load()

2.get() 和 post() 方法

2.1 $.get() 方法

2.2 $.post() 方法