操作类
<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) )
