jQuery初识
1.jQuery介绍
jQuery是一个优秀的JavaScript库,以最少的代码实现更多的功能
-
特点:
1.强大的选择器的功能 $("selector") 2.语法简介 $("selector").action() 3.隐式迭代 $("div").click(); //5个div会自动循环添加点击事件 4.链式操作 $("").操作1().操作2().操作3() 5.兼容性好
2.使用
2.1 引入
下载: https://jquery.com/ 官网 https://www.jquery123.com/ 中文 版本: 3.6.0 最新版 2.0以下版本 : 使用版本 2.0以上不兼容IE 引入方式: 本地下载好的jQuery文件 网上CDN上的jQuery文件 <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <!-- 引入下载好的本地jQuery --> <!-- <script src="./js/jquery-3.6.0.js"></script> --> <!-- 引入在线的 CDN:内容分发网--> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script> <script> 特点: // 特点1:语法简介 $("选择器").方法(); // 特点2:强大选择器功能 所有css中能使用选择器,在jQuery中都可以使用 // 特点4:简化html文档操作,动画效果,ajax,事件 $(".box").css({"width":100,"height":100,"background":"red"}); // 特点3:隐式迭代 $(".box").click(function(){ // 特点5:链式操作 $().css(操作1).... $(this).css({"background":"teal"}).siblings().css({"background":"red"}) }); </script>
2.2 $的作用
jQuery.js文件 创建了一个jQuery对象,在这个对象上封装了各种方法 window.jQuery = window.$ = jQuery
2.3 jQuery加载方法
// 等文档和资源都加载完成后调用 // window.onload = function () { // var oDiv = document.getElementsByTagName("div")[0]; // oDiv.onclick = function () { // alert("点击"); // } // } // window.onload = function () { // var oDiv = document.getElementsByTagName("div")[0]; // oDiv.onmouseover = function () { // alert("移入"); // } // } //jQuery的加载方法 $(document).ready(function () { $("div").click(function () { console.log("点击"); }) }); $().ready(function () { $("div").mouseover(function () { console.log("移入"); }) }); $(function(){ $("div").mouseout(function () { console.log("移出"); }) }); /* window.onload 和 $().ready()区别 window.onload 等文档和资源加载完成后调用 添加多次后面的会覆盖前面的 $().ready() 等文档加载完成后调用 添加多次,会叠加 */
==注意window.onload 和 $().ready()区别==
2.4 jQuery对象和DOM对象的关系
-
可以共存
//jQuery和js 可以共存 $("div").css({ "width": 200, "height": 200, "background": "gold" }); var oDiv = document.getElementsByTagName("div")[0]; oDiv.style.background = "teal";
-
不能混用
//不能混用 //oDiv.css({"width":100}); //$("div").style.width = "100px";
-
可以相互转换
//可以相互转换 console.log(oDiv); //DOM对象 标签 元素集合 节点列表 console.log($("div")); //jQuery对象 //DOM对象----》jQuery对象 $(DOM) console.log($(oDiv)); //jQuery.fn.init [div] //jQuery对象----》转DOM对象 console.log($("div")[0]);
3.jQuery选择器
3.1 基本选择器
$(function(){ //id: $("#id") 获取到对应id名的标签 $("#middle").css({"background":"pink"}); //class : $(".class名") 获取到对应class名的标签 $(".box").css({"background":"teal"}); //元素 jQuery中选择器没有优先级,只有先后顺序 $("li").css({"background":"orange"}); //分组 元素,元素 $("p,span").css({"color":"green"}); //添加事件 $("li").click(function(){ console.log(this); //<li></li> DOM元素 $(this)--转jQuery $(this).css({"background":"teal"}); //$().index("selector") : 給当前元素的父元素的所有子元素添加下标 console.log($(this).index());; console.log($(this).index("li"));; }); });
3.2 层次选择器
//后代选择器 $("div span").css({"color":"red"}); //子代选择器 $("div>span").css({"color":"teal"}); //+:相邻兄弟选择器 $("p+span").css({"color":"orange"}); //~: 后面所有的 $("p~span").css({"color":"orange"});
3.3 基本过滤选择器
//:位置 $("li:first").css("background","red"); $("li:last").css("background","red"); $("li:nth-child(2n)").css("background","red"); $("li:nth-child(2n+1)").css("background","pink"); $("li:odd").css("background","red"); //奇数 $("li:even").css("background","pink"); //偶数 //:eq(下标) : 从0开始 $("li:eq(2)").css("background","red"); var index = 3; $("li").eq(index).css("background","pink"); //not(选择器) : 除了 $("li:not(.box)").css("background","pink"); $("li").not(".box").css("background","pink"); //gt():获取下标大于n lt():获取下标小于n $("li:lt(3)").css("background","red"); $("li:gt(2)").css("background","#ccc");
3.4 属性过滤选择器
//E[attr]:匹配有attr属性的E标签 $("div[class]").css("background", "pink"); //E[attr=value]:匹配有attr属性并且值位value的E标签 $("div[class=box2]").css("background", "red"); //E[attr!=value]:匹配有attr属性并且值不为value的E标签 $("div[class!=box2]").css("background", "teal"); //E[attr^=value]:匹配有attr属性并且值以value开头的E标签 $("div[class^=b]").css("background", "teal"); //E[attr$=value]:匹配有attr属性并且值以value结尾的E标签 $("div[class$=4]").css("background", "orange"); //E[attr*=value]:匹配有attr属性并且值包含value的E标签 $("div[class*=s]").css("background", "deeppink");
3.5 表单选择器
//表单选择器 console.log( $(":input")); //获取的是所有的表单元素 (input button textarea select) // :input的type类型,获取到具体类型的input console.log($(":text")); //文档框 console.log($(":radio")); //单选框 //:checked : 获取选择框被选中的标签 console.log( $(":checkbox:checked")); console.log( $(":checkbox:checked").length);
==注意常用选择器:id,元素,class,分组,后代,子代,eq必须要掌握==
4.jQuery操作标签属性
4.1操作标签属性
-
原生js操作标签属性: 标签.属性名 = “属性值"
-
DOM操作标签属性:
-
设置:标签.setAttribute("属性名","属性值")
-
获取:标签.getAttribute("属性名")
-
删除:标签.removeAttribute("属性名")
-
-
jQuery操作标签属性
-
$().attr() : 操作自定义属性(一般使用这个,自定义和固有都能操作)
-设置:$().attr("属性名","属性值") (js取值赋值一体)
-获取:$().attr("属性名")
-删除:$().removeAttr("属性名")
-
$().prop() :操作固有属性 (input标签的checked属性,就必须使用prop)
-设置:$().prop("属性名","属性值") (js取值赋值一体)
-获取:$().prop("属性名")
-删除:$().removeProp("属性名")
//-设置:$().attr("属性名","属性值") $("div").attr("id","active"); //-获取:$().attr("属性名") console.log($("div").attr("index")); //1 //删除:$().removeAttr("属性名" $("div").removeAttr("class"); //区别 如果属性值是true false的情况下,使用prop操作属性 console.log($("input").attr("checked")); //checked undefined console.log($("input").prop("checked")); //true false $("input").prop("checked",false);
-
4.2 操作class属性
//1.$().addClass("类名") : 追加class $(this).addClass("active"); //2.$().removeClass("类名"):删除对应的class $(this).removeClass("active"); //3.$().hasClass("类名") : 判断当前元素是否存在某个类名,有返回true,不存在返回false if($(this).hasClass("active")){ //有 $(this).removeClass("active"); }else{ //没有 $(this).addClass("active"); } //4. $().toggleClass("类名") : 开关,如果当前有这个class就删除,没有就添加 $(this).toggleClass("active");
5.jQuery操作标签内容
-
原生js
-
表单元素:标签.value
-
闭合标签:标签.innerHTML/innerText 操作闭合标签内容,覆盖原有内容,innerHTML识别标签,innerText不识别标签
-
-
jQuery
-
表单元素: $().val();
-
闭合元素: $().html()/text();
-
//1.设置表单元素:$().val("值") $("input").val("黄河入海流"); $(window).keydown(function(ev){ if(ev.keyCode == 13){ //2.获取表单元素内容:$().val() var v = $("input").val(); console.log($("input").val()); //3.获取闭合元素内容 $().html() console.log($("div").html()); // <p>白日依山尽</p> console.log($("div").text()); // 白日依山尽 //4.设置闭合元素内容 $().html(); // $("div").html(v); //会覆盖之前的 $("div").html($("div").html()+"<p>"+v+"</p>"); //会覆盖之前的 // $("div").text($("div").html()+"<p>"+v+"</p>"); //会覆盖之前的 } })
6.操作标签样式
-
原生js:标签.style.属性名 = 属性值
-
jQuery:$().css()
//1.写单个样式 $().css("属性名","属性值") $("div").css("background","pink"); //2.写多个样式 $().css({"属性名":"属性值"}) $("div").css({ "width":200, //属性值数是数字的话, number,string(要加单位) "height":"200px", "margin-top":"200", //设置无效 "height":"hahahah", //給的不对,不报错,只是不给标签设置,相当于这行代码无效 marginLeft:"200px" //对象key可以不加引号,如果是复合属性,使用驼峰标识 }