这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战
jQuery 操作标签的内容
html() 方法
html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容。
方法可以传递一个参数，自定义的字符串内容。
• 获取：文本和内部标签, 获取时只能获取第一个元素内部的文案
语法：jQuery对象.html();
• 设置：若设置标签时，标签会被渲染
语法：jQuery对象.html('文本内容');
// html() 方法，如果传递参数，批量更改元素内部的内容
$box.html("这是一个新的内容")
// 如果内部的字符串包含了标签的语法的字符，会按照 html 语法进行加载
$box.html('这是新增加的子级<p>这是段落</p>')
text() 方法
text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字。
• 获取：仅仅是文本, 获取的是所有的文本
语法：jQuery对象.text();
• 设置：若设置标签时，标签会被当做普通文本
语法：jQuery对象.text('文本内容');
val() 方法
val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容。
• 获取：表单元素的 value
语法：jQuery对象.val();
• 设置：表单元素的value
语法：jQuery对象.val('文本内容');
注意:
对于<select>来说, val()获取的是选中元素的value; 对于<option>来说, val()获取的是默认选择的元素的value, 注意<option>改的是标签内的value, 不是内部的文字.
注意:
<input>等单标签不能使用.html()和.text(), 只能通过val()获取内容对于双标签来说, 三种方式都是有效的
jQuery 操作标签的属性
attr() 方法
attr：全称 attribute，属性的意思。
作用：用来获取或者设置标签的属性值。
• 设置标签的属性
语法：jQuery对象.attr(name,value);
• 获取标签属性值
语法：jQuery对象.attr(name);
// 标签属性设置：需要传 2 个参数
$pic.attr("src","images/cat2.jpg")
// 获取标签属性的值：需要 1 个参数
console.log($pic.attr("alt"))
removeAttr() 方法
作用：移除标签的属性
语法：removeAttr(name);
// 删除属性方法 removeAttr()
$pic.removeAttr("hobby")
prop() 方法
针对：selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。
• 获取
语法：$('input').prop('属性名');
• 设置
语法：$('input').prop('属性名',值);
// prop() 方法，得到的是布尔值
console.log($btn.prop("disabled"))
console.log($choose.prop("checked"))
// 设置
$btn.prop("disabled",false)
如果使用attr(), 得到的是"disabled", 而不是布尔值
jQuery 操作样式方法
css() 方法
jQuery 对象有一个 css() 的方法，用于调用 css 属性值或者更改 css 属性值。
语法：jQuery对象.css(name,value);
-
参数1：字符串格式的 css 样式属性名
-
参数2：设置或更改的属性值。
注意
-
一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式。
-
两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法。
可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css()的参数。
// css() 传一个参数：获取对应的属性值
console.log($box.css("width"))
// 复合属性的单一属性写法，可以是横线写法，也可以是驼峰命名法
console.log($box.css("background-color"))
console.log($box.css("backgroundColor"))
// css() 传入两个参数：设置或更改对应的属性值
$box.css("width","400px")
$box.css("width","400")
$box.css("width",500)
$box.css("width","+=100px")
// 设置多条属性，可以使用对象形式的参数
$box.css({
"width": 200,
"height": 300
})
jQuery 操作类名方法
addClass() 添加类名
语法：jQuery对象.addClass('类名')
• 参数：字符串格式的类名。
// jQuery 中的类名控制方法，只会操作指定的类名，不会影响其他类名
// 点击按钮 添加，让元素增加一个类名
$btn1.click(function () {
$box.addClass("demo")
})
removeClass() 移除类名
删除指定的类名. jQuery 中的类名控制方法，只会操作指定的类名，不会影响其他类名.
语法：jQuery对象.removeClass();
• 参数：字符串格式的类名。
• 不传参数，表示删除所有的类名
// 点击按钮 删除，让元素减少一个类名
$btn2.click(function () {
// $box.removeClass("demo")
// 如果不传参数，会删除所有类名
$box.removeClass()
})
toggleClass() 类名切换
若这个类名存在，则会移除该类名。否则添加该类名
语法：jQuery对象.toggleClass('类名');
• 参数：字符串格式的类名。
• 优点：三个方法只操作参数部分的类名，不影响原有的其他类名。
// 点击按钮 切换，让元素在一个类名中进行添加和删除的自动切换
$btn3.click(function () {
$box.toggleClass("demo")
})
hasClass() 检测类名是否存在
• 语法：jQuery对象.hasClass('类名');
• 返回值：true 和 false
// 判断一个类名在标签中是否加载
console.log($box.hasClass("demo"))
jQuery 常用事件方法
jQuery 对象封装了一系列的事件方法。
事件方法与原生 JS 事件方法名称类似，不需要写 on。
事件方法需要 jQuery 对象打点调用，小括号内的参数是事件函数。例如点击事件：click() 方法。
mouseenter() 方法
jQuery 中自己的事件方法。鼠标进入一个元素触发的事件。
mouseleave() 方法
jQuery 中自己的事件方法。鼠标离开一个元素触发的事件。
对比
注意：mouseenter 和 mouseleave 没有事件冒泡。
在使用时替换 mouseover 和 mouseout 更加合适。
hover() 方法
hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。
参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数。
// hover() 方法，对mouseenter 和 mouseleave 进行了合并书写
$box.hover(function () {
// 鼠标移入
$box.addClass("demo")
},function () {
// 鼠标离开
$box.removeClass("demo")
})
jQuery 关系查找方法
$(this) 自己
• 在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法。
parent() 父级
jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级。
父级得到的也是一个 jQuery 对象，直接继续打点调用 JQ 方法和属性。
children() 子级
jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery 对象。
得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性。
获得子级时，不限制标签类型。
children() 可以传参数：参数是字符串格式的选择器，在选中所有子级的情况下，保留满足选择器的部分，进行了二次选择。
// 通过点击 div 获取它的子级元素
$box.click(function () {
// 获取子级
$(this).children().css("background-color","pink")
// 添加参数后，会按照指定的选择器在子级中进行二次选择
// $(this).children("p").css("background-color","pink")
})
siblings() 兄弟
jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟。
得到 jQuery 对象可以继续使用 JQ 的方法和属性。
siblings() 方法得到的 jQuery 对象可以进行二次选择，通过给参数传递字符串格式的选择器。
$ps.click(function () {
// 让点击的自己 颜色变红色
// this 指向的是触发事件的事件源的原生 JS 对象
// 需要转换成 jQuery对象
$(this).css("background-color","red")
// 找到事件源的 父级元素，添加黄色背景
$(this).parent().css("background-color","yellow")
// 查找兄弟元素
$(this).siblings().css("background-color","skyblue")
// $(this).siblings("h2").css("background-color","skyblue")
})
链式调用
jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回值就是 jQuery 对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用 JQ的方法和属性。
• 可以使用 jQuery 对象进行连续打点调用。
$ps.click(function () {
// 让点击的自己 颜色变红色
// jQuery 对象调用除了节点关系的方法之外，其他的方法执行后，返回值就是 对象自己
// 可以继续链式调用其他的 jQuery 对象的方法和属性
// console.log($(this).css("background-color","red").html("哈哈"))
$(this).css("background-color", "red") // 自己变红色
.siblings().css("background-color", "gold") // 兄弟变金色
.parent().css("background-color", "pink") // 父级变粉色
.siblings().css("background-color", "blue") // 父级的兄弟变蓝色
.children().css("background-color", "yellowgreen") // 父级的兄弟的子级变黄绿色
})
jQuery 其他关系查找方法
find() 后代元素
jQuery 对象可以利用 find() 方法，传递一个参数，参数部分规定的选择器，查找范围是 jQuery 对象的所有后代。
• 参数是字符串格式的选择器。
// find() 方法查找后代中的 span 元素
$box1.find("span").css({
"width": 50,
"height": 50
})
兄弟元素
紧邻的兄弟元素方法
• next() 下一个兄弟
• prev() 前一个兄弟
多选方法
• nextAll() 后面所有兄弟
• prevAll() 前面所有兄弟
通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或后面兄弟中选中符合选择器规定的部分。
// 让自己变红色，让下一个兄弟变蓝色
$(this).css("background-color", "red")
.next().css("background-color", "skyblue")
$(this).css("background-color", "red")
.prev().css("background-color", "blue")
// 让自己变红色，让前面所有兄弟变蓝色，让后面所有兄弟变黄色
$(this).css("background-color", "red")
.prevAll().css("background-color", "blue")
$(this).nextAll("p").css("background-color", "yellow")
parents() 祖先级
通过该方法得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象。
• 通过传参进行二次选择，参数位置是字符串格式的选择器
// 让自己变红色，祖先级变天蓝色
$(this).css("background-color", "red")
.parents("div").css("background-color", "skyblue")
