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对象可以继续调用其它函数, 形成一个链式结构
 
 
 
posted @ 2022-03-07 20:13  俺是前端小菜  阅读(89)  评论(0编辑  收藏  举报