操作类
<style>
div{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: skyblue;
transition: all 1s;
}
.item{
background-color: pink;
transform: rotate(360reg);
}
</style>
<div>我是一个div</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// 1、添加类方法 addClass()
$('div').addClass('item');
// 2、删除类 removeClass()
$('div').addClass('item');
// 3、切换类 toggleClass() 如果没有这个类就添加，如果有就删除
$('div').click(function(){
$(this).toggleClass('item');
})
// 封装函数实现toggleClass()
/* hasClass() 方法检查被选元素是否包含指定的类名称。
如果被选元素包含指定的类，该方法返回 "true"，没有则返回"false"。*/
// 1、第一种方法
function toggleFn() {
if ($(this).hasClass('divClass')) {
$(this).removeClass('divClass')
} else {
$(this).addClass('divClass')
}
}
$('div').click(function () {
toggleFn.call(this)
})
// 2、第二种方法
function toggleFn(that) {
if ($(that).hasClass('divClass')) {
$(that).removeClass('divClass')
} else {
$(that).addClass('divClass')
}
}
$('div').click(function () {
toggleFn.(this)
})
</script>
复制代码
jQuery节点操作
<!-- 工厂函数$()用于获取或创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转换成jQuery节点
$(html):使用HTML字符串创建jQuery节点
--!>
<div>123</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 通过选择器获取节点 */
// console.log( $('div') );
/* 把DOM节点转换成jQuery节点 */
// let div1 = document.querySelector('div');
// console.log( $(div1) );
/* 使用HTML字符串创建jQuery节点 */
let h1 = $('<h1>我身无拘，吾道无穷。</h1>');
console.log(h1);
$('div').html(h1);
</script>
复制代码
jQuery html() 方法
html() 方法设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
语法 返回内容：
$(
selector
).html()
设置内容：
$(
selector
).html(
content
)
使用函数设置内容：
$(
selector
).html(function
(index,currentcontent)
)
jQuery text() 方法
text() 方法设置或返回被选元素的文本内容。
当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。
当该方法用于设置内容时，则重写所有匹配元素的内容。
语法 返回文本内容：
$(
selector
).text()
设置文本内容：
$(
selector
).text(
content
)
使用函数设置文本内容：
$(
selector
).text(function
(index,currentcontent)
)
jQuery val() 方法
val() 方法返回或设置被选元素的 value 属性。
当用于返回值时： 该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时： 该方法设置所有匹配元素的 value 属性的值。
注意： val() 方法通常与 HTML 表单元素一起使用。
语法 返回 value 属性：
$(
selector
).val()
设置 value 属性：
$(
selector
).val(
value
)
通过函数设置 value 属性：
$(
selector
).val(function
(index,currentvalue)
)
jQuery append() 方法
append() 方法在被选元素的结尾插入指定内容。
语法 $(
selector
).append(
content,
function(
index,html
))
jQuery appendTo() 方法
appendTo() 方法在被选元素的结尾插入 HTML 元素。
语法 $(
content
).appendTo(
selector
)
jQuery prepend() 方法
prepend() 方法在被选元素的开头插入指定内容。
语法 $(
selector
).prepend(
content
,function
(index,html)
)
jQuery prependTo() 方法
prependTo() 方法在被选元素的开头插入 HTML 元素。
语法 $(
content
).prependTo(
selector
)
jQuery after() 方法
after() 方法在被选元素后插入指定的内容。
语法 $(
selector
).after(
content
,function(
index
))
jQuery before() 方法
before() 方法在被选元素之前插入指定的内容。
语法 $(
selector
).before(
content,
function
(index)
)
