JQuery基本学习

最新推荐文章于 2022-06-28 13:55:06 发布

原创最新推荐文章于 2022-06-28 13:55:06 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JQuery的基本选择器，包括元素、ID、类选择器，以及层级和顺序选择器。同时，详细介绍了如何使用JQuery访问和操作DOM对象，包括长度、遍历、获取特定元素等方法。此外，还讲解了JQuery中的事件处理，如鼠标、键盘事件，以及动画效果的实现。最后，涵盖了文档处理和Ajax请求的使用。

JQuery

一、选择器

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

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

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

基本：

元素选择器

在页面中选取所有 元素，得到的是JS的Object对象:
```
$("p");
```
id选择器

获取页面中id为text的元素，得到的是JS的Object对象：
```
$("#text");
```
类选择器

获取页面中class为myClass的元素，得到的是JS的Object对象：
```
$(".myClass");
```

层级：

获取父标签下的所有后代元素

获取表单中所有的后代input元素：
```
$("form input");
```
获取父标签下匹配所有的子元素

获取表单中所有input子元素：
```
$("form>input");
```
获取所有紧接在 prev 元素后的 next 元素

获取所有跟在label后面的input标签：
```
$("label+input");
```

顺序：

:first，:last

// 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul>li:first");
// 选取第一个 <ul> 元素的最后一个 <li> 元素
$("ul>li:last");

:even，:odd

// 选取偶数位置的li元素
$("ul>li:even");
// 选取奇数位置的li元素
$("ul>li:odd");

表单：

input

获取所有的input标签：
```
$(":input");
```
text

获取所有的text文本框：
```
$(":text");
```
submit

获取所有的submit按钮
```
$(":submit");
```
disabled

获取所有不可用的input元素
```
$("input:disabled");
```
checked

获取所有选中的复选框元素
```
$("input:checked")
```
selected

获取所有选中的选项元素
```
$("select option:selected");
```
not

获取所有未被选中的input元素
```
$("input:not(:checked)");
```

二、对象访问

length

jQuery 对象中元素的个数。

获取所有图片的数量
```
$("img").length;
```
each()

对于每个匹配的元素所要执行的函数，第一个参数为元素的下标，第二个参数为元素对象本身
```
$("img").each(function(index,element){
   this.src = "test" + i + ".jpg";
 });
```
get(index)

取得其中一个匹配的元素。 index表示取得第几个匹配的元素。
```
$("img").get(0);
```
html()

设置或返回所有匹配元素的html内容。

无参时表示获取元素的html内容：
```
var html = $("p").html();
```
有参时表示设置元素的文本内容：
```
 $("p").html("hello world");
```
text()

设置或返回所有匹配元素的文本内容。

无参时表示获取元素的文本内容：
```
var text = $("p").text();
```
有参时表示设置元素的文本内容：
```
$("p").text("hello world");
```
val()

设置或返回匹配元素的当前value值。

无参时表示获取元素的value值：
```
var text = $("input").val();
```
有参时表示设置元素的value值：
```
$("input").val("hello world");
```
attr()

设置或返回被选元素的属性值。

返回文档中所有图像的src属性值：
```
$("img").attr("src");
```
为所有图像设置src属性：
```
$("img").attr("src","test.jpg");
```
为所有图像设置src和alt属性：
```
$("img").attr({ src: "test.jpg", alt: "Test Image" });
```
css()

设置或返回被选元素的样式属性。

获取p标签的样式属性值：
```
var color = $("p").css("color");
```
将所有段落字体设为红色：
```
$("p").css("color","red");
```
将所有段落的字体颜色设为红色并且背景为蓝色：
```
$("p").css({ color: "#ff0011", background: "blue" });
```

三、事件

鼠标事件

事件名	描述
click()	鼠标单击事件
dblclick()	鼠标双击事件
mouseover()	当鼠标指针位于元素上方时
mouseout()	当鼠标指针从元素上移开时

为第一个button按钮添加单击事件

$(":button:first").click(function(){});

键盘事件

事件名	描述
keydown()	当按钮被按下时，发生 keydown 事件。
keyup()	完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
keyup()	当按钮被松开时，发生 keyup 事件。

页面载入

$(document).ready(function(){
    // 执行代码
});

js原生load方法与Jquery的ready的区别：

	window.οnlοad=function(){};	$(document).ready(function(){});
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，不会被上一次覆盖
简写	无	$(function(){});

其他事件

submit()

表单的提交事件。可以通过返回false来取消提交。

提交本页中的第一个表单：
```
$("form:first").submit();
```
也可以传入方法参数：
```
$("form:first").submit(function(){
    // 执行代码
});
```
live()

给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

给所有button按钮添加单击事件，即使是页面中新增的标签。
```
$(':button').bind('click', function() {
  // 执行代码
});
```

四、文档处理

append()

向每个匹配的元素内部追加内容。

向所有段落中追加一些HTML标记：
```
$("p").append("Hello");
```
after()

在每个匹配的元素之后插入内容。

在所有段落之后插入一些HTML标记代码:
```
$("p").after("Hello");
```

五、Ajax

GET/POST请求

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

参数：url,[data],[callback],[type]

url：必需的 URL 参数规定您希望请求的 URL。
data：待发送 Key/value 参数。
callback：请求成功后所执行的函数名。
type：返回内容格式：xml, html, script, json, text, _default。

获得 test.php 页面返回的 json 格式的内容：

$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name); // John
     console.log(data.time); //  2pm
   }, "json");

六、动画效果

animate()

用于创建自定义动画的函数。

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn:回调函数，在动画完成时执行的函数。

$("div").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000,function(){
      alert("running over");
  } );
});