jQuery

最新推荐文章于 2022-11-16 10:54:32 发布

喵叻个汪

最新推荐文章于 2022-11-16 10:54:32 发布

阅读量147

点赞数 2

本文链接：https://blog.csdn.net/weixin_43752668/article/details/87870085

版权

一什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
二 jQuery环境配置
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

 <script src="./js/jquery-3.3.1.min.js"></script>

元素初始化问题：如果jQuery代码写在元素之前

 方法一：
 $(document).ready(function () {
            /*代码*/
        });
方法二：
 $(function () {
            /*代码*/
        })

三 jQuery选择器

一.基本选择器
1.类名称选择器： $(" . 类名称")
2.id选择器： $("#id ")
3.元素选择器：$("元素名称")
4.全部元素选择器：$("*")
5.复合选择器：$("类名称,id等等")

<body>
    <button class="btn" id="btn"></button>
    <button></button>
    <span id="bt"></span>
<script>
    console.log($(".btn"));     //类名称选择器
    console.log($("#bt"));      //id选择器
    console.log($("button"));  //元素选择器
    console.log($("*"));         //全部元素选择器
    console.log($(".btn,#bt"));   //复合选择器
</script>
</body>

二.层次选择器
1.直接子元素： $("父元素>子元素")
2.所有子元素：$("父元素子元素")
3.某元素之后单个元素：$("类名称+元素名称")
4.某元素之后所有元素：$("类名称~元素名称")

<body>
<ul>
    <li>0</li>
    <li>1
        <ol>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ol>
    </li>
    <li class="li3">2</li>
    <p>000</p>
    <li>3</li>
    <p>001</p>
</ul>
<script>
 console.log($("ul>li"));   //直接子元素
 console.log($("ul li"));     //所有子元素
 console.log($(".li3+p"));      //某元素之后单个元素
 console.log($(".li3~p"));      //某元素之后所有元素
</script>

三.过滤选择器
1.简单过滤
（1）第一个子元素：$("父元素>子元素:first")
（2）最后一个子元素：$("父元素>子元素:last")
（3）索引为偶数包含0：$("父元素>子元素:even")
（4）索引为奇数：$("父元素>子元素:odd")
（5）索引大于num：$("父元素>子元素:gt(num)")
（6）索引小于num：$("父元素>子元素:lt(num)
（7）索引等于num：$("父元素>子元素:eq(num)
（8）除去所选择元素：$("父元素>子元素:not(某元素)

<body>
<ul>
    <li>0</li>
    <li>1
        <ol>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ol>
    </li>
    <li class="li3">2</li>
    <p>000</p>
    <li>3</li>
    <p>001</p>
</ul>
console.log($("ul>li:first"));      //第一个子元素
    console.log($("ul>li:last"));       //最后一个子元素
    console.log($("ul>li:even"));     //索引为偶数 包含0
    console.log($("ul>li:odd"));     //索引为奇数
    console.log($("ul>li:gt(1)"));     //索引大于1
    console.log($("ul>li:lt(1)"));     //索引小于1
    console.log($("ul>li:eq(1)"));     //索引等于1
    console.log($("ul>li:not(.li3)"));     //除去所选择元素

2.内容过滤
（1）内容包含某字符：$("元素:contains(某字符)")
（2）空元素不包含内容空格折行：$("元素:empty")
（3）非空元素：$("元素:parent")
（4）包含某元素的父元素：$("元素:has('某元素')")

<body>
<div></div>
<div>
    <span>1</span>
</div>
<script>
console.log($("div:contains(1)"));     //内容包含某字符
console.log($("div:empty"));     //空元素 不包含内容 空格 折行
console.log($("html:parent"));     //非空元素
console.log($("div:has('span')"));     //包含某元素的父元素
</script>
</body>

3.可见性过滤
（1）可见元素：$("元素:visible")
（2）不可见元素：$("元素:hidden")

<body>
<input type="button" class="btninput" value="按钮1" style=" display: block;"/>
<input type="button" class="btninput" value="按钮2" style=" display: none;"/>
<script>
 console.log($(".btninput:visible"));    //可见元素
  console.log($(".btninput:hidden"));     //不可见元素
  </script>
  </body>

4.属性过滤
（1）具有某属性的元素：$("元素[属性]")
（2）具有某多个属性的元素：$("元素[属性][属性]")
（3）具有某属性值的属性的元素：$("元素[属性=属性值][属性=属性值]")
（4）不是某属性值的元素：$("元素[属性!=属性值]")
（5）属性值以某字符开始：$("元素[属性^=某字符]")
（6）属性值以某字符结束：$("元素[属性$=某字符]")
（7）属性值包含某字符：$("元素[属性*=某字符]")

<body>
<button class="btn" id="btn"></button>
<button></button>
<script>
 console.log($("button[id]"));         //具有某属性的元素
    console.log($("button[id][class]"));    //具有某多个属性的元素
    console.log($("button[id=btn][class=btn]"));   //具有某属性值的属性的元素
    console.log($("button[id!=btn]"));     //不是某属性值的元素
    console.log($("button[id^=b]"));     //属性值以某字符开始
    console.log($("button[id$=n]"));     //属性值以某字符结束
    console.log($("button[id*=t]"));     //属性值包含某字符
</script>
</body

5.子元素过滤
（1）第几个子元素 num表示序列数：$("父元素>子元素:nth-child(num)")
（2）第一个子元素：$("父元素>子元素:first-child")
（3）最后一个子元素：$("父元素>子元素:last-child")
（4）仅有一个子元素：$("父元素>子元素:only-child")

<body>
<ul>
    <li>0</li>
    <li>1
        <ol>
            <li>11</li>
            <li>12</li>
            <li>13</li>
        </ol>
    </li>
    <li class="li3">2</li>
    <p>000</p>
    <li>3</li>
    <p>001</p>
</ul>
<div>
    <span>1</span>
</div>
<script>
    console.log($("ul>li:nth-child(2)"));   //第几个子元素 2-顺序
    console.log($("ul>li:first-child"));    //第一个子元素
    console.log($("ul>li:last-child"));     //最后一个子元素
    console.log($("div>span:only-child"));   //仅有一个子元素
/script>
</body>

6.表单对象属性过滤
（1）具有某属性的表单元素：$("表单元素[type='某类']:属性")

<body>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>男
<input type="radio"/>女
<select id="sel">
    <option value="1">宝鸡</option>
    <option value="2" selected>西安</option>
</select>
<script>
    console.log($("input[type='checkbox']:checked")); //被选中的复选框
    console.log($("input[type='radio']:checked"));    //被选中的单选框
    $("#sel").change(function(){
        console.log($("#sel>option:selected"));       //下拉菜单被选中的option
    });
</script>
</body>

四.表单选择器
（1）某类表单元素：$("input:某类")
（2）所有select texteare input button：$(":input")

<body>
<input type="button" class="btninput" value="按钮1" style=" display: block;"/>
<input type="button" class="btninput" value="按钮2" style=" display: none;"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>男
<input type="radio"/>女
<select id="sel">
    <option value="1">宝鸡</option>
    <option value="2" selected>西安</option>
</select>
<input type="text"/>
<script>
 console.log($("input:checkbox"));     //复选框
    console.log($("input:radio"));     //单选框
      console.log($("input:text"));     //单行文本框
    console.log($(":input"));     //所有select texteare input button
</script>
</body>

四 jQuery操作DOM元素
1.操作元素的属性值
（1）获取属性值：.attr("属性"); .prop("属性");
（2）设置属性值：.attr("属性","属性值"); .prop("属性","属性值");

<body>
<input type="button" value="按钮" width=""/>
<script>
     console.log($("input[type='button']").attr("value"));  
     console.log($("input[type='button']").prop("value"));   
     $("input[type='button']").attr("value","按钮1");   
	 console.log($("input[type='button']").attr("value"));   
 	 $("input[type='button']").prop("value","按钮1");
 	 console.log($("input[type='button']").prop("value"));    
 //一次设置多个属性值
     $("input[type='button']").attr({
           value:"你好啊",
           width:"100px"       
      });
//设置自定义属性
    $("input[type='button']").attr("data-src","./img/1.jpg");
    console.log($("input[type='button']").attr("data-src"));
    $("input[type='button']").prop("data-src","./img/1.jpg");
    console.log($("input[type='button']").prop("data-src"));
</script>
</body>

2.删除元素的属性：
（1）可删除自带属性和自定义属性，行内不会显示已删除属性：.removeAttr("属性")
（2）只可删除自定义属性，行内不会显示已删除属性：.removeProp("属性")

<body>
<input type="button" value="按钮" width=""/>
<script>
    $("input[type='button']").attr("data-src","./img/1.jpg");
    $("input[type='button']").prop("data-src","./img/1.jpg");
	$("input[type='button']").removeAttr("value");
    console.log($("input[type='button']").attr("value"));   //可删除自带属性 行内不会显示已删除属性
    $("input[type='button']").removeProp("value");
    console.log($("input[type='button']").attr("value"));    //不能删除自带属性
    $("input[type='button']").removeProp("data-src");
    console.log($("input[type='button']").prop("data-src"));    //只可删除自定义属性 行内还会显示已删除的属性
    $("input[type='button']").removeAttr("data-src");
    console.log($("input[type='button']").attr("data-src"));    //可删除自定义属性  行内不会显示已删除属性
    </script>
    </body>

3.元素内容的操作
（1）获取标签内容和文本内容：.html() .text()
（2）设置html值和文本值将直接取代子元素：.html("html值") .text("文本值")

<body>
<div id="block">
    <span>困！</span>
</div>
<script>
	 $("#block").html("热");
     console.log($("#block").html());    //jquery
     $("#block").text("热");
     console.log($("#block").text());
</script>
</body>

4.操作表单元素的值
（1）获取表单元素的value值：.val()
（2）设置表单元素的value值：.val("属性值")

<body>
<input type="text" id="txt" value="请输入..."/>
<script>
	$("#txt").val("12334");
     console.log($("#txt").val());
</script>
</body>

5.操作元素的css
（1）获取元素的样式：.css("属性")
（2）设置元素的样式：.css("属性","属性值")

<body>
<input type="text" id="txt" value="请输入..."/>
<script>
    $("#txt").css("border","1px solid red");
    console.log($("#txt").css("border"));
//     设置多个样式
     $("#txt").css({
        width:"100px",
        height:"20px"
    })
</script>
</body>

6.类名称的添加
（1）追加类名称：.addClass("类名称")、
（2）移除类名称：.removeClass("类名称")
（3）移除所有类名称：.removeClass()
（4）有就移除没有就追加：.toggleClass("类名称")

<body>
<button id="btn" class="btndata">按钮</button>
<script>.
		$("#btn").addClass("btninfo");
       $("#btn").addClass("btninfo btnaa");   //追加多个类
       $("#btn").removeClass("btninfo");
       $("#btn").removeClass("btninfo btnaa");  //移除多个类名称
       $("#btn").removeClass();
       $("#btn").toggleClass("btndata");
</script>
</body>

7.操作子父节点
（1）父元素的子节点：.children()
（2）第一个子元素：.first()
（3）最后一个元素：.last()
（4）找某同胞元素：.siblings("元素名称或者元素类名称等等")
（5）找所有同胞元素 .siblings()
（6）找当前元素上一个元素：.prev()
（7）找当前元素前所有元素：.prevAll()
（8）找当前元素前所有某些元素：.prevAll("元素名称或类名称等等")
（9）找当前元素的下一个元素：.next()
（10）找当前元素后的所有元素：.nextAll()
（11）找当前元素后的所有某些元素：.nextAll("元素名称或者类名称等")
8.过滤元素：.filter()
9.判断当前元素是谁：.is()

<body>
<ul>
    <li class="lilist">1</li>
    <li >2</li>
    <span>6</span>
    <li class="lilist">3</li>
    <span>5</span>
    <li>4</li>
</ul>
<script>
 console.log($("ul").children()[0]);
 
 console.log($("ul>li").first());
 console.log($("ul>li").last());
 console.log($("ul>li").eq(0));
 
 console.log($("ul>li").first().siblings());
 console.log($("ul>li").first().siblings("li"));
 console.log($("ul>li").first().siblings(".lilist"));
 
 console.log($("ul>li").eq(2).prev());
 console.log($("ul>li").eq(2).prevAll());
 console.log($("ul>li").eq(2).prevAll("li"));
 console.log($("ul>li").eq(2).prevAll(".lilist"));
 
 console.log($("ul>li").eq(2).next());
 console.log($("ul>li").eq(2).nextAll());
 console.log($("ul>li").eq(2).nextAll("li"));
 console.log($("ul>li").eq(2).nextAll(".lilist"));
 
 console.log($("ul>li").filter(".lilist"));
 
 console.log($("ul>li").eq(2).is(".lilist"));   //返回true/false
</script>
</body>

10.创建DOM元素

var str=$("<span></span>");

11.插入节点
（1）内部插入：
1> 插入当前元素里面内容之后：
当前元素.append(对象) 对象.appendTo(当前元素);
2>插入当前元素里面内容之前：
当前元素.prepend(对象) 对象.prependTo(当前元素);

<body>
<div class="block">
    <p>1</p>
</div>
<script>
var str=$("<span></span>");
 $(".block").append(str);
 str.appendTo($(".block"));     //插入当前元素里面内容之后
 $(".block").prepend(str);
 str.prependTo($(".block"));     //插入当前元素里面内容之前
</script>
</body>

（2）外部插入：
1>插入当前元素之后：
当前元素.after(对象) 对象.insertAfter(当前元素);

2>插入当前元素之前：
当前元素.before(对象) 对象.insertBefore(当前元素);

<body>
<button id="btn">按钮</button>
<script>
var str=$("<span></span>");
 $("#btn").after(str);
str.insertAfter($("#btn"));     //插入当前元素之后
$("#btn").before(str);
str.insertBefore($("#btn"));    //插入当前元素之前
</script>
</body>

12.复制节点
当前元素.clone( )
参数：false（默认）：只是复制元素
true：深度复制复制事件等

<body>
<button id="btn">按钮</button>
<script>
$("#btn").click(function () {
    alert(1);
});
var clonebtn=$("#btn").clone(true);
$("body").append(clonebtn);
</script>
</body>

13.包裹节点
（1）用元素包裹所选单个元素：所选元素.wrap(对象或字符串)
（2）用元素包裹所选单个或多个元素：所选元素.wrapAll(对象或字符串)
（3）把所选元素的子元素包裹：所选元素.wrapInner(对象或字符串)
（4）移除包裹标记或元素的父级元素：所选元素.unwrap()

<body>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<script>
 var s=$("<span></span>");
   $(".btn").wrap(s);
   $(".btn").wrap("<span></span>");
   $(".btn").wrapAll(s);
   $(".btn").wrapAll("<span></span>");
   $(".btn").wrapInner(s);
   $(".btn").wrapInner("<span></span>");
   $(".btn").unwrap();
</script>
</body>

14.元素的遍历 元素.each()

$(".btn").each(function (index) {   //参数 索引
        $(this).click(function () {
            console.log(index);
            if(index==1){
                return false;    //提前终止each遍历
            }
            console.log("你好")
        })
    })

14.替换节点：元素.replaceWith(对象)

五 jQuery里的尺寸问题
1.可视区宽度：.winth()
2.包括内边距：.innerWinth()
3.包括内边距和边框宽度：.outerWinth()

<head>
<style>
        body {
            padding: 30px 30px;
            margin: 50px 50px;
            border: 10px solid black;
        }
    </style>
</head>
<body>
</body>
<script>
    console.log($("body").width());
    console.log($("body").innerWidth());
    console.log($("body").outerWidth());
</script>

输出显示：
在这里插入图片描述

六 jQuery 里的事件
1.基本写法：

$("#btn").click(function () {
    console.log(1);
}).mouseenter(function () {
    console.log(2);
}).mouseleave(function () {
    console.log(3)
})       //链式操作

2.通过事件的对象

$("#btn").click(function (e) {
      事件的对象event 通过事件获取当前操作元素的节点
    var ele= e.target;
    console.log(ele);
    console.log($(this));
});

3.bind绑定事件 bind(type,data,fn)

//写法1
$("#btn").bind("click",function(){
    console.log(1)
}) 
//写法2
$("#btn").bind("click",btnmethod);    //函数名称后面不加（）
function btnmethod(){
    console.log(1)
    }
//写法3   
$("#btn").bind("click",2, function (e) {
console.log(e);    //jQuery事件对象
console.log(e.data);   //2传给事件对象的data属性
console.log(event);   //与e不同
})
//一次性绑定多个事件
$("#btn").bind("click mouseleave", function (e) {
if(e.type=="click"){
    console.log(1);
}
else{
    console.log(2);
}
}).unbind("click");
// .unbind() 移除对象的事件 不带参全部移除 带参移除指定事件
$("#btn").click(function () {
    var ele=$("<button>追加</button>");
    ele.addClass("btnz");
    $(".block").append(ele);
    $(".btnz").bind("click", function () {       //动态创建的元素添加事件在原事件函数里直接添加
        console.log(1)
    })
});

4.特殊绑定 .on() 与bind用法一样，但可以进行事件的委托，bind不行

 $("#btn").on("click mouseleave",function(){
 console.log(1)
  })
 $("ul").on("click","li", function () {   //ul事件委托给li
     $(this).css("backgroundColor","red");    //this--li
     var ele="<li>new</li>";
     $(this).parent().append(ele);
 });
 $("ul").bind("click","li", function () {     //不委托
     $(this).css("backgroundColor","red");       //this--ul
     var ele="<li>new</li>";
     $(this).parent().append(ele);
 })

5.事件的切换 hover() ：mouseenter 和 mouseleave事件的切换

//写法1
$(".b1").mouseenter(function () {
    console.log(1);
}).mouseleave(function () {
    console.log(2);
});
//写法2
$(".b1").hover(function () {   
    console.log(1);
}, function () {
    console.log(2)
})

6.一次性事件 .one()

 $(".b1").one("mouseenter", function () {
     console.log(1);
 })

7.指定事件 .trigger()

$(".b1").trigger("mouseenter")
        .mouseenter(function () {
    $(this).css("backgroundColor","red")
});

8.触发事件 .trigger() 写在事件之后

$("#txt").focus(function () {
    $(this).css("color","red")
}).trigger("focus");

9.自定义事件

 $("#txt").bind("mytxt", function (e, a, b, c) {
     console.log(c)
 });
 $("#txt").trigger("mytxt",[1,2,3])

七 jQuery里的动画
1.出现隐藏 show() hide() 参数：动画时间，动画
toggle() show() 和hide()的结合

$("#btn").click(function () {
    $(".block").hide(1000, function () {
        console.log(1)     //动画完成时执行的函数
    })
});
$("#btn1").click(function () {
    $(".block").show(1000, function () {
        console.log(2)
    })
})
$("#btn").click(function () {
    $(".block").toggle(1000, function () {
        console.log(1)
    })
})

2.滑动效果上滑消失slideUp() 下滑出现slideDown()

$("#btn").click(function(){
    $(".block").slideUp();
});
$("#btn1").click(function () {
    $(".block").slideDown();
});
$("#btn").click(function () {
    $(".block").slideToggle(1000, function () {
        console.log(1)
    })
})

3.淡入淡出动画淡入fadeIn() 淡出fadeOut()

$("#btn").click(function () {
    $(".block").fadeOut(500);
});
$("#btn1").click(function () {
    $(".block").fadeIn(500);
});
$("#btn").click(function () {
    $(".block").fadeToggle(500);
})

4.透明度变化动画 fadeTo()

$("#btn").click(function () {
    $(".block").fadeTo(500,0.5, function () {
        console.log(1)
    })
})

5.自定义动画 dalay()动画的延迟 stop()动画的暂停

$("#start").click(function () {
    $(".block").delay(1000).animate({
        marginLeft:"100px",
        opcity:0
    },1000, function () {
        console.log(1)
    }).delay(1000).animate({
        marginLeft:"0",
        opcity:1
    },1000, function () {
        console.log(2)
    })
});
$("#stop").click(function () {
    $(".block").stop();    //结束当前动画进行别的动画
})

喵叻个汪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery

一什么是 jQuery ？jQuery是一个JavaScript函数库。jQuery是一个轻量级的&amp;quot;写的少，做的多&amp;quot;的JavaScript库。二 jQuery环境配置jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 &amp;amp;lt;script src=&amp;quot;./js/jquery-3.3.1.min.js&amp;quot;&amp;amp;gt;&am
复制链接

扫一扫

jQuery

“相关推荐”对你有帮助么？