网页编程之jQuery常用知识点整理

最新推荐文章于 2020-04-20 10:50:38 发布

Farewell is well

最新推荐文章于 2020-04-20 10:50:38 发布

阅读量365

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网页编程文章标签： jQuery 基础知识总结

本文链接：https://blog.youkuaiyun.com/RugalEclipse/article/details/99693092

网页编程专栏收录该内容

3 篇文章

订阅专栏

网页编程之jQuery常用知识点整理

备注：本文的知识点针对后端编程人员的需求进行整理，所涉知识较为基础。

1.1 jQuery是什么

jQuery是一个JavaScript代码库，极大的简化了JavaScript编程。

1.2 如何在网页中添加jQuery

从jquery.com下载jQuery库
从CDN中载入jQuery
jQuery有两个版本
- Production version ：用于实际的网站中，精简了注释和源码，体积小。
- Development version：用于测试和开发，包含注释和源码，体积大。

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

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

1.3 jQuery语法

通过jQuery语法，可以查询HTML元素，并对其执行一些操作。

1.3.1 基础语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

美元符号定义jquery
选择符（selector）用于查询和查找HTML元素
通过action（）方法对元素进行操作，这里的action（）方法是泛指，并非实际方法。

1.3.2 文档就绪事件

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

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

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

如果在文档没有完全加载之前就运行函数，操作可能失败。

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

jQuery的入口函数是在HTML所有标签（DOM）都加载之后就会去执行。
JavaScript的window.onload事件是等到所有内容包括外部图片之类的文件加载完毕
才去执行。

1.4 jQuery选择器

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

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

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

元素选择器：通过元素名选取元素

获取p标签元素

    $("p")

#id选择器：通过元素的id属性获取元素

获取id为test的元素

    $("#test")

.class选择器：获取指定的class元素

获取class为test的元素

    $(".test")

其他选择器：

选择器名	选择器描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 p标签元素
$(“p:first”)	选取第一个p元素
$(“ul li”)	选取所有ul元素下的li元素
$(“ul li:first”)	选取第一个ul元素下的第一个li元素
$(“ul li:first-child”)	选取每个ul元素的第一个li元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 a元素
$(":button")	选取所有 type=“button” 的 input元素和 button元素
$(“tr:even”)	选取偶数位置的 tr 元素
(“tr:odd”)	选取奇数位置的 tr元素

1.5 jQuery事件

jQuery是为事件特别设计的。

1.5.1 什么是事件

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

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

在元素上移动鼠标
单机某个按钮
按下键盘某个按键

在事件中经常使用术语"触发"（或"激发"）例如： “按下按键时触发 keypress 事件”。

常见DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

1.5.2 jQuery事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").事件();

如果事件触发后需要执行操作，可以这样写：

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

1.5.3 jQuery事件绑定

bind（）方法

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

语法：

$(selector).bind(event，function)

示例：

 $("p").bind("click",function(){
    alert("这个元素被单击。");
  });

在上述示例中，当鼠标单机p元素时就会触发函数，弹出弹窗。

one（）方法

one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。

语法：

$(selector).one(event,function)

示例：

 $("p").one("click",function(){
    alert("这个元素被单击。");
  });

在上述示例中，当鼠标单机p元素时就会触发函数，弹出弹窗。
但是这个事件仅可触发一次，第二次点击时，将会失效。

1.6 jQuery 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

1.6.1 jQuery append（）方法

jQuery append() 方法在被选元素的结尾插入内容（仍然在元素的内部）。

$("p").append("追加文本");

1.6.2 jQuery prepend（）方法

jQuery prepend() 方法在被选元素的开头插入内容（仍然在元素的内部）

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

1.6.3 通过append（）和prepend（）添加多个元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。

下面是使用append（）方法向body标签末尾添加多个文本的示例
同样的也可以使用prepend（）方法向body标签头部添加多个文本

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);     // 追加新元素
}

1.6.4 jQuery after（）和before（）方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

1.6.5 通过after（）和before（）添加多个元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

1.7 jQuery 获取或设置内容和属性

Query 拥有可操作 HTML 元素和属性的强大方法。

1.7.1 获得内容 -text（）、html（）、val（）

text（）-设置或返回所选元素的文本内容，类似于js中的innnertext
html（）-设置或返回所选元素的内容（包括HTML标记），类似于js中的innnerhtml
val（）-设置或返回表单字段的值，类似于js中的value

下面是一组示例：

$("#test").text());
$("#test").html());
$("#test").val());

1.7.2 获取属性 -attr（）

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

attr（“param”）方法中的参数是元素的属性。

如果没有相应的属性，则返回undefined。

比如获得id为test的超链接标签的href属性：

$("#test").attr("href");

与此方法比较类似的一个方法是**prop（）**方法：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()方法。

使用prop（）方法时，如果没有相应的属性，返回空字符串“”。

1.7.3 设置内容和属性

对于text（）、html（）、val（）三个方法，只需给定相应的参数即可设置或改变元素的值。

$("#test1").text("Hello world!");
$("#test2").html("<b>Hello world!</b>");
$("#test3").val("RUNOOB");

使用attr（）也可以设置和改变元素的属性。

只需在参数中给定属性和要改变的值即可。

例如：将id为test的超链接标签的href属性设置为百度的链接。

 $("#test").attr("href","http://www.baidu.com");

1.8 jQuery删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

1.8.1 删除元素和内容

如果需要删除元素和内容，jQuery中提供了两个方法：

remove() - 删除被选元素本身及其下的所有子元素
```
$("#div1").remove();
```
empty() - 仅删除被选元素的子元素
```
$("#div1").empty();
```

1.8.2 过滤需要被删除的元素

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

该参数可以是任何 jQuery 选择器的语法。

下面这个示例将移除所有id为div1下的class为italic的p元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1>p").remove(".italic");
  });
});
</script>
</head>
<body>
	<div id="div1">
        <p>这是一个段落。</p>
        <p class="italic"><i>这是另外一个段落。</i></p>
        <p class="italic"><i>这是另外一个段落。</i></p>
        <button>移除所有  class="italic" 的 p 元素。</button>
    </div>
</body>
</html>

需要注意的是，这样的写法是错误的：

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

子元素的过滤器需要被包含在父元素的过滤器当中
这种写法父元素首先会选出id为div1的元素
但这些元素中并没有包含class为italic的元素。

1.9获取并设置CSS类

通过 jQuery，可以很容易地对 CSS 元素进行操作。

jQuery 拥有若干进行 CSS 操作的方法。

1.9.1 jQuery addClass（）方法

该方法用于向被选元素添加一个或者多个类（class属性），从而为其添加已指定的css样式。

.important{
	height：100px；
	width：100px；
}
$("div").addClass("important");

在上述示例中，我们实现规定好了一种样式
通过改变div元素的class属性，为其指定了样式。

1.9.2 jQuery removeClass（）方法

该方法用于从被选元素删除一个或多个类（class属性），从而删除已匹配的css样式。

 $("div").removeClass("important");

1.9.3 jQuery toggleClass（）方法

顾名思义，toggle是开关、切换的意思。
该方法用于对被选元素进行添加或删除类的切换操作。

$("div").toggleClass("important");

如果被选择的元素没有class属性，则为其添加class=“important”
如果被选择的元素已经有了class=”implortant“属性，则将其删除

1.9.4 jQuery css（）方法

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

如需返回指定的 CSS 属性的值，则需给定指定的属性作为参数。

获取p元素的背景颜色：

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

如果在css（）方法中指定了两个参数，则可以设置该属性。

第一个参数为属性名，第二个参数为属性值。

设置p元素的背景颜色为黄色：

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

当需要设置多个css属性时，可以使用json，语法格式如下：

css({“propertyname”:“value”,“propertyname”:“value”,…});

示例：

$("p").css({"background-color":"yellow","font-size":"200%"});

上述示例中，为所有p元素添加了背景颜色和字体的样式。

1.10 jQuery 替换元素

有两个常用的替换元素的方法，replaceWith（） replaceAll（）

1.10.1 jQuery replaceWith（）方法

replaceWith() 方法把被选元素替换为新的内容。

语法：

$(selector).replaceWith(*content,*function(index))

说明：

content：必需参数。规定要插入的内容（可以包含html标签）
- 可能的值：
  - HTML元素
  - jQuery对象
  - DOM元素
function（index）：可选参数。规定返回替换内容的函数。
- index：返回集合中元素的index位置。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replaceWith</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            //将第一个P元素内的文本替换为HelloWorld。
            $("p:first").replaceWith("Hello world!");
            //如果在参数内加上HTML标签也是可以的。
            //$("p:first").replaceWith("<b>Hello world!</b>");
            //这样的话气体会加粗
        });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>使用新文本替换第一个P元素</button>
</body>
</html>

1.10.2 jQuery replaceAll方法

replaceAll() 方法把被选元素替换为新的 HTML 元素。

语法：

$(content).replaceAll(selector)

说明：

content：必需。规定要插入的内容（必须包含HTML标签）。
selector：必需。规定哪一个元素将被替换。
通过语法可以看出replaceAll方法实际是将HTML转成
了jQuery对象然后替换了被选择的内容，所以其必须
包含HTML标签，而不能是单纯的文本。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>replaceAll</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            //这里一定不能缺少HTML标签，否则无法替换。
            $("<span><b>Hello world!</b></span>").replaceAll("p:last");
        });
    });
</script>
</head>
<body>
    <button>用一个span元素替换最后一个p元素</button><br>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>