jquery的常用API

Posted 2022-03-08 俺是前端小菜

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对象可以继续调用其它函数, 形成一个链式结构