JQuery学习一
文章目录
- 前言
- 一、JQuery是什么？
- 二、属性和内容
- 2.1. jQuery选择器
- 2.2. attr() 方法
- 2.3. text()方法
- 2.4. val()方法
- 2.5. 小结
- 2.6. 添加内容
- 三、操作CSS
- 3.1. addClass() 方法
- 3.2. removeClass() 方法
- 3.3. toggleClass() 方法
- 3.4. CSS()方法
- 3.5. jQuery尺寸方法
- 总结
前言
一、JQuery是什么？
jQuery是一个快速，小巧，功能丰富的JavaScript库。
jQuery 使HTML文档遍历和操作，事件处理和动画等操作变得更加简单。
jQuery的所有功能都是通过JavaScript访问的，因此掌握JavaScript对于理解，构建和调试代码至关重要。
首先，让我们看一下分别使用原生js和使用jQuery操作 HTML 的示例。
原生js的使用：要获取id=“start” 的元素并将其html更改为"出发吧,骚年"，我们需要执行以下操作：
var el = document.getElementById("start");
el.innerHTML = "出发吧,骚年!";
使用jQuery进行相同的操作，我们只需要一行代码：
$("#start").html("出发吧，骚年!");
二、属性和内容
可以从www.jquery.com下载jQuery库的副本，或者从 CDN （内容分发网络）（如BootCDN或百度CDN）中引用
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
2.1. jQuery选择器
jQuery 通过选择器允许您对 DOM 元素组或单个 DOM 节点进行操作，如下：
$("div.menu") // 选取所有 class="meue" 的 <div> 元素。
$("p:first") // 第一个<p>元素
$("h1, p") // 所有<h1>和所有<p>元素
$("div p") // 所有<div>元素后代的<p>元素
$("*") // DOM的所有元素
$("ul li:first") //选取第一个 <ul> 元素的第一个 <li> 元素
2.2. attr() 方法
我们可以通过jQuery轻松的操作分配给HTML元素的属性。
比如元素的 href,src,id,class,style 属性。
attr()方法用于获取属性的值。
//返回属性的值：
$(selector).attr(attribute)
attr() 方法还用于设置属性值，则为匹配元素设置一个或多个属性/值对。
//设置属性和值：
$(selector).attr(attribute,value)
//例如
$(function() {
$("a").attr("href", "https://www.jquery.com");
});
removeAttr() 方法从被选元素移除一个或多个属性。如需移除若干个属性，请使用空格分隔属性名称。
//语法：
$(selector).removeAttr(attribute)
//在下面的示例中，我们删除了表的边框和类属性：
$("table").removeAttr("border");
$("table").removeAttr("class");
2.3. text()方法
text() 方法设置或返回被选元素的文本内容
当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
//语法：
$(selector).text()
可以使用 html() 和 text() 方法来更改HTML元素的内容
HTML：
<div id="test">
<p>some text</p>
</div>
JS:
$(function() {
$("#test").text("hello!");
});
上面的代码将 id=“test” 的元素的内容更改为"hello!"。
如果设置的内容包含HTML标记，则应使用 html() 方法而不是 text()
$(function(){
$("#demo").html("<b>Hi</b>");
});
2.4. val()方法
允许我们获取和设置表单字段的值
//语法：
$(selector).val(value)
HTML：
<input type="text" id="name" value="名字">
JS:
$(function() {
alert($("#name").val());
});
//弹出 "名字"
获取表单字段的值, 并将值赋给 id=“demo” 的元素中
$(function(){
var t=$("#user").val();
$("#demo").text(t);
});
2.5. 小结
以下jQuery方法可用于获取和设置所选HTML元素的内容和属性：
- text() 设置或返回的是标签中包含的仅仅是文本值，并不包含标签内的任何元素。text()方法不能使用在表单元素上
- html() 设置或返回的是标签中的内部的一切，包括文本。html()方法使用在多个元素上时，只读取第一个元素。
- val() 设置或返回的仅仅是标签中的value属性的值。val()只能使用在表单元素上
- attr() 设置或返回标签中任意属性的值。
- removeAttr() 删除指定的属性。
2.6. 添加内容
正如我们在以前的课程中所看到的，html() 和 text() 方法可以用于获取和设置所选元素的内容。
然而，这些方法用于设置内容时，现有内容将被覆盖。
我们将学习jQuery具有用于向所选元素添加新内容而不删除现有内容的方法：
- append() - 在被选元素的结尾插入内容（还在元素内）
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容（即在元素之外）
- before() - 在被选元素之前插入内容
append()
html:
<p id="demo">hello</p>
js:
$(
function (){
$("#demo").append(" world")
}
);
before() 和 after()
html:
<p id="demo">hello</p>
js:
$(function () {
$("#demo").before("<i>Some Title</i>");
$("#demo").after("<b>Welcome</b>");
});
也可用于添加新创建的元素，如下将新创一个内容为“Hi” 的p元素
html:
<p id="demo">hello</p>
js:
$(function() {
var txt = $("<p></p>").text("Hi");
$("#demo").after(txt);
});
上面提到的用于创建元素的语法可以用来创建任何新的HTML元素，例如$(“< div >< /div >”)可以创建一个新的div。
三、操作CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
3.1. addClass() 方法
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。
//语法：
$(selector).addClass(classname)
如下所示，为div元素指定了一个“header”类。
HTML:
<div>Some text</div>
CSS:
.header {
color: blue;
font-size:x-large;
}
JS:
$("div").addClass("header");
要在 addClass() 方法中指定多个类, 只需使用空格分隔它们。 例如$(“div”).addClass(“class1 class2 class3”)
3.2. removeClass() 方法
removeClass() 方法从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
从div元素中删除“header”类。
$("div").removeClass("header");
3.3. toggleClass() 方法
toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。
如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
我们将处理一个按钮单击事件来切换一个类
HTML:
<p id="demo2">一些文本</p>
<button>切换类</button>
CSS:
.red {
color:red;
font-weight: bold;
}
JS:
$(function (){
$("button").click(function () {
$("#demo2").toggleClass("red");
});
});
3.4. CSS()方法
与 html() 方法类似，可以使用 css() 方法来获取和设置被选元素的一个或多个样式属性。
该方法返回第一个匹配元素的指定 CSS 属性值。
/*设置 CSS 属性和值：*/
$(selector).css(property,value)
代码弹出获取的段落 background-color 属性值，然后将其值设置为blue。
HTML:
<p>一些文本</p>
CSS:
p {
background-color:red;
color: white;
}
JS:
$(function() {
alert($("p").css("background-color"));
$("p").css("background-color", "blue");
});
css（） 方法可以使用JSON语法设置多个CSS属性。
$("p").css({"color": "red", "font-size": "200%"});
3.5. jQuery尺寸方法
jQuery 提供多个处理尺寸的重要方法：
- width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth()方法返回元素的宽度（包括内边距）。
- innerHeight()方法返回元素的高度（包括内边距）。
- outerWidth()方法返回元素的宽度（包括内边距和边框）。
- outerHeight()方法返回元素的高度（包括内边距和边框）。
下面代码中我们将div的宽度和高度设置为100px，并为其设置背景颜色：
$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);
总结
–2023-12-8
