作者:Morpheus尘世美t | 来源:互联网 | 2023-08-13 10:38
1.jquery是什么一个js的框架,可以方便的使用js2什么是jQuery对象是由jQuery封装后的DOM对象注意:与DOM对象的方法不同,不可以混用,但
1.jquery是什么
一个js的框架,可以方便的使用js
2 什么是jQuery对象
是由jQuery封装后的DOM对象
注意:与DOM对象的方法不同,不可以混用,但是可以相互转换
3.基本语法:
jQuery对象.方法()
4.得到jQuery对象:
1)选择器:
基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签
$("input:checked")
2)筛选器:
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
$("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()
补充:根据text进行选择:
$(":contains('搜索工具')")
5.操作:
属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) height() width()
文档处理
内部插入 $("#c1").append("hello") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
eg:
remove: 移除
$("#cnblogs_post_body > p:nth-child(60) > span > span").remove()
[span, prevObject: init(1), context: document, selector: "#cnblogs_post_body > p:nth-child(60) > span > span"]
事件
$(document).ready(function(){}) -----------> $(function(){})
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){})
动画效果: 查看http://jquery.cuishifeng.cn/
回调函数:
$("p").hide(1000,function(){
alert('动画结束')
})