jquery的常用API
1, 增
$('body').append('<h1>大标题</h1>')
$('body').append('<h2>二标题</h2>')
$('<h3>').appendTo('body') 标签有内容加结束标签,没有内容可以不加
$("<h3>3标题</h3>").appendTo("body")
$("<h4>4标题</h4>").prependTo("body")
2,删
$('h2).remove() 删除所以的h2标签
$('h2‘’).detach()
$("h3").empty() 清空h2标签,但标签本身并未删除
3,改
$("h4").text("<i>h4</i>")
$('h4').html('<i>h4</i>')
4,查
$("li")[2]
$("li").eq(2) 返回值是ul,也就是父元素
li3.children()
li3.siblings()
li3.prev()
li3.prevAll()
li3.next()
li3.nextAll()
关于标签属性的操作
$("h4").attr("age", "10")
$("h4").attr("age")
$("h4").attr("id", "abc")
class属性
$("h4").attr("class", "a b")
$("h4").addClass("c")
$("h4").removeClass("a")
$("h4").toggleClass("c")
var bool = $("h4").hasClass("b")
style样式属性
$("h4").css("font-size","40px")
$("h4").css({
color: "red",
backgroundColor: "gray",
"border-radius": "20px"
})
关于jQuery对象动画
$('h4'),animate({
font-size:'100px' 变化后的样式
}, 1000, function(){ 执行时间
console.log("动画执行结束") 函数执行结束时的回回调函数
})
关于jQuery尺寸和位置
$("h4").width()
$(window).innerWidth()
$("html").height() 类似于offsetheight
$("h4").offset() 类似offsetleft
关于事件
$("li").click(function(){
alert($(this).text())
})
绑定页面加载事件
window.onload = function(){}
$(window).ready(function(){})
$(function(){})
链式调用
链式调用: 一个对象可以连续打点调用多个函数, 这种结构叫链式调用结构
如:
$("h3")
.css("color", "blue")
.attr("id", "h3")
.animate({ fontSize: "50px" });
原理: jQuery中每一个函数的返回值都是调用它的jQuery对象本身, 所以一个函数调用后返回这个jQuery对象可以继续调用其它函数, 形成一个链式结构