JQuery语法：查找+操作

最新推荐文章于 2024-10-16 19:14:18 发布

lvhongwei1990

最新推荐文章于 2024-10-16 19:14:18 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lvhongwei1990/article/details/87018076

jquery的基础语法：$(selector).action() 即查找元素.操作
一、查找元素（选择器和筛选器）
1.1 选择器
1.1.1 基本选择器
$("*") $("#id") $(".class") $(“element”) $(".class,p,div")
1.1.2 层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
1.1.3 基本筛选器
$(“li:first”) $(“li:eq(2)”) $(“li:even”) $(“li:gt(1)”)
1.1.4 属性选择器
$(’[id=“div1”]’) $(’[“alex=“sb”][id]’)
1.1.5 表单选择器
$(" [t y p e =^{'} t e x t^{'}] ") - - - - - >$ (”:text") 注意只适用于input标签 : $(“input:checked”)
1.2 筛选器
1.2.1 过滤筛选器
$(“li”).eq(2) $(“li”).first() $(“ul li”).hasclass(“test”)
1.2.2 查找筛选器
$(“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()

二、操作
1、属性操作
--------------------------属性
$("").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”)

2、文档处理

创建一个标签对象
$("

")
内部插入
$(" ") . a p p e n d (c o n t e n t ∣ f n) - - - - - >$ (“p”).append(“Hello”);
$(" ") . a p p e n d T o (c o n t e n t) - - - - - >$ (“p”).appendTo(“div”);
$(" ") . p r e p e n d (c o n t e n t ∣ f n) - - - - - >$ (“p”).prepend(“Hello”);
$(" ") . p r e p e n d T o (c o n t e n t) - - - - - >$ (“p”).prependTo("#foo");
替换
$(" ") . r e p l a c e W i t h (c o n t e n t ∣ f n) - - - - - >$ (“p”).replaceWith("Paragraph. ");

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

复制
$("").clone([Even[,deepEven]])
3、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])