addClass() 方法向被选元素添加一个或多个类
该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性
$(function() {
// addClass():给元素添加class属性
// 如果元素上已经有其他的classname
// 那么会将新增加的追加到现有的classname后面
// //找到第一个input,绑定对点击事件
$("input:first").click(function() {
//先获取到所有的li
//然后再给这些li添加class
$("ul li").addClass("basic")
})
// removeClass():可以将元素的某个class移除
// ,如果未传参数,则可以将元素上的所有class移除掉
$("input:eq(2)").click(function() {
//先获取到所有的li
//然后再移除li添加class
$("ul li").removeClass("basic")
//移除class为bigger的
$("ul li").removeClass();
//将元素上所有class移除掉
})
$("input:eq(3)").click(function() {
//先获取到所有的li
//hasClass(类名),用来判断元素上是否又某个class,如果有,则返回true,
// 反之则返回false
//alert($("ul li").hasClass("bigger"))
//如下代码用来判断是否又tigger,如果没有则进行添加
if (!$("ul li").hasClass("basic")) {
$("ul li").addClass("basic");
}
})
$("input:eq(4)").click(function() {
$("ul li").toggleClass("basic")
})
})
append方法追加元素
$(function() {
$("#btn").click(function() {
$("ul").append("<li>西瓜</li>")
})
$("#btn1").click(function() {
$("<li>香瓜</li>").appendTo("ul");
})
$("#btn2").click(function() {
$("ul").prepend("<li>西瓜</li>")
})
$("#btn3").click(function() {
// console.log($("#btn3"));
$("<li>蜜瓜</li>").prependTo("ul");
})
$("#btn4").click(function() {
// console.log($("#btn3"));
$("ul").after("西瓜");
})
$("#btn5").click(function() {
// console.log($("#btn3"));
$("ul").before("西瓜");
})
})
text()用来设置或返回被选元素的文本内容
html()用来返回或设置被选元素内容
$(function() {
$("div").click(function() {
// alert($("#username").val())
// console.log($("span").html("Hello"));
console.log($("span").text("Hello"));
})
})
简易选项卡
$(function() {
//给力标签绑定鼠标移入事件
$("ul li").mouseover(function() {
//如何获取到当前鼠标移入的li标签.this
$(this).css("opacity", 1).siblings().css("opacity", 0.5);
//给鼠标移入的li标签的opactiy设置为1,
// 将其他的兄弟标签li的opacity设置为0.5
})
$("ul li").mouseout(function() {
$(this).siblings().css("opacity", 1);
})
})