jquery
- 就是js的函数库
- 主要是极大程度优化js中的dom板块
- jquery中所有应用都为函数
使用
-
下载：
- 官网：jquery.com
- jq22官网：www.jq22.com/
-
在需要使用的文件中引入jquery文件（先引入再使用）
获取标签
$("css选择器名称")
$(".item1");
$("#one");
$("div");
- 注意：juqery和原生写法不能混用
jquery对象和dom对象之间的转换
1.将jquery对象转换为dom对象
let _item = $(".item1");//jquery对象
//使用下标[下标]
_item[0];
//使用.get(下标)
_item.get(0);
2.将dom对象转换jquery对象 $(dom对象)
let item = document.querySelector(".item1")
$(item);
获取标签内容/修改内容
1.获取内容
$("css选择器").html()
$("css选择器").text()
$("输入框选择器").val()
2.修改内容
$("css选择器").html("新数据")//可以解析标签
$("css选择器").text("新数据")//不能解析标签
$("输入框选择器").val("新数据")
增加/删除html节点
.before()：在指定标签之前添加新标签.after()：在指定标签之后添加新标签.append()：在指定父标签末尾处添加新标签
// item3之前增加标签 参数为新标签数据
$(".item3").before("<span>这是span1</span>")
// item3之后增加标签
$(".item3").after("<span>这是span2</span>")
// 在父元素末尾添加新标签
$(".box").append("<span>这是span3</span>")
.remove()：删除指定标签
$("待删除标签").remove()
获取/修改属性
分类
- 普通原生属性：必须同时有属性名和属性值(src/alt)
- 特殊原生属性：布尔属性值——属性名和属性值相同
- 自定义属性：开发者在标签上自定义属性(data-id/data-index)
-
普通原生属性
1.获取属性 $("css选择器").attr("属性名") 2.修改属性 $("css选择器").attr("属性名","属性值") //批量修改 $("css选择器").attr({ 属性名1:属性值1, 属性名2:属性值2 ..... }) -
特殊原生属性
1.获取属性 $("css选择器").prop("属性名")//返回布尔值 $("css选择器").attr("属性名")//返回字符串或者undefined 2.修改属性 $("css选择器").prop("属性名",布尔值) -
自定义属性
1.获取属性 2.$("css选择器").data("-后的属性名") 3.$("css选择器").attr("属性名")
删除属性
$("css选择器").removeAttr("属性名")
clsss属性操作
-
.hasClass()：判定当前标签上是否有该类名，返回布尔值 -
.addClass()：添加类名，不会覆盖原本的类名 -
.removeClass()：删除指定类名 -
.toggleClass()：切换类名$("css选择器").hasClass("类名") $("css选择器").addClass("类名") $("css选择器").removeClass("类名") $("css选择器").toggleClass("类名")
事件
-
.事件类型(回调函数)：不支持input事件$(".btn1").click(function(){ alert(1) }) -
on：on(事件类型，触发事件的标签,回调函数)，支持任意事件类型和事件委托$(".box").on("click","button",function(e){ console.log(111); console.log(e.target); console.log($(this));//获取当前触发事件的标签,相当于e.target,但是获取jquery对象 })$(this)：表示触发事件的标签
获取/修改css样式
-
.css("css属性名","css属性值")//获取 $("div").css("width") //修改 $("div").css("width","300px") //批量修改 $("div").css({ width:"400px", height:"500px", backgroundColor:"red" }) -
show()：控制标签进行显示 -
hide()：控制标签进行隐藏 -
toggle()：控制标签进行切换$(".btn1").click(function(){ $(".box").show() }) $(".btn2").click(function(){ $(".box").hide() }) $(".btn3").click(function(){ $(".box").toggle() }) -
fadeIn()：淡入效果 -
fadeOut()：淡出效果 -
fadeToggle()：淡入效果的切换$(".btn1").click(function(){ // 淡入效果 // 参数为动画作用事件 为毫秒 $(".box").fadeIn(2000) }) $(".btn2").click(function(){ // 淡出 $(".box").fadeOut() }) $(".btn3").click(function(){ $(".box").fadeToggle() })- 参数为动画作用事件，为毫秒
操作多选框
$("[name=hobby]").click(function () {
let arr = [];
let checkeds = $("[name=hobby]:checked")
// jquery对象不能使用foreach方法 each(function(index,element)) 获取dom原生对象
checkeds.each((i, ele) => {
// arr.push(ele.value)
arr.push($(ele).val())
})
console.log(arr);
})
// 全选$(".btn1").click(function(){
$("[name=hobby]").prop("checked",true)
})
// 取消选择$(".btn2").click(function(){
$("[name=hobby]").prop("checked",false)
})
操作其他节点
//1.获取父标签 .parent()
console.log($(".item3").parent());
//2.获取指定祖父标签 .parents("css选择器名")
console.log($(".item3").parents("body"));
//3.获取子标签 .children() 直接子元素
console.log($("div").children());
//4. 获取满足条件的后代标签 .find("css选择器")
console.log($("div").find("li"));
//5. 上一个兄弟标签
console.log($(".item3").prev());
//6. 下一个兄弟标签
console.log($(".item3").next());
//7. 指定条件兄弟标签
console.log($(".item3").siblings("li"));
