jquery基本操作

Posted 2020-11-20 ajaxa

3.1.1 基本选择器

$("*") $("#id") $(".class") $("element") $(".class,p,div")

 

3.1.2 层级选择器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

 

3.1.3 基本筛选器

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

 

3.1.4 属性选择器

$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)

 

3.1.5 表单选择器

$("[type=‘text‘]")----->$(":text") 注意只适用于input标签 : $("input:checked")

 

查找筛选器
$("div").children(".test") $("div").find(".test")

$(".test").next() $(".test").nextAll() $(".test").nextUntil()

$("div").prev() $("div").prevAll() $("div").prevUntil()

$(".test").parent() $(".test").parents() $(".test").parentUntil()

$("div").siblings()

 

属性操作
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------html代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

 

文档处理

//创建一个标签对象
$("<p>")

//内部插入

$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");

//外部插入

$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");

//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

$("").empty()
$("").remove([expr])

//复制

$("").clone([Even[,deepEven]])

 

css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])