1.jQuery初识

1.1 jQuery是优秀JavaScript库
  • 解决了兼容问题
  • 简化获取标签、DOM操作、事件、动画、ajax
  • 强大的选择器功能(通过选择器选择标签)$(“选择器”)
  • 函数化(方法化) 语法:$(“选择器”).action();
  • 取值赋值一体
//赋值
$("div").html("<strong>发卡福建安防</strong>");

//取值
var text = $("div").html();
console.log(text); //<strong>发卡福建安防</strong>
  • 链式操作
$(this).css("background","teal").siblings().css("background","");
$(this).css("width",100).css("height",100)
1.2 引入
  • 网站
  • 官网:jquery.com
  • 中文官网:https://www.bootcdn.cn/jquery/
  • 版本
  • 最新:3.5.1
  • 使用:2版本以下,2以上版本不兼容IE
<!-- 引入本地的 -->
<!-- <script src="./js/jquery-1.9.1.js"></script> -->

<!-- 引入CDN(内容分发网)上的 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    $("div").css({"width":100,"height":100,"background":"teal"});
</script>
1.3 jquery的加载
  • ready
// jquery的加载  ready
$(document).ready(function () {
    //window.jQuery = window.$ = jQuery;  别名
    $("div").css("width", 100);
});

$().ready(function(){
    $("div").css("height",100);
});

$(function(){
    $("div").css("background","teal");
});
  • window.onload和ready方法的区别
  • window.onload
  • 等文档和资源都加载完成后执行
  • 多个事件覆盖
  • ready
  • 等文档加载完成后就执行
  • 多个事件叠加
1.4 jQuery和DOM对象的关系
  • jQuery对象:通过$(“选择器”)
  • DOM对象:通过document获取,具体的标签或元素集合
//1.获取元素  DOM对象:通过document获取的
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv);

//2.jquery获取对象  jQuery对象:通过$()获取
console.log($("div"));
  • 可以共存不能混用
//3.可以共存,不能混用
oDiv.style.width = "100px";
$("div").css("height",100);
//$("div").style.background = "red";
  • 相互转换
//4.DOM转jQuery $(DOM);
$("div").click(function(){
    console.log(this); //DOM
    $(this).css("background","red");
});

//5.jQuery转DOM  $()[下标]  $().get(下标)
console.log($("div")[0]);
console.log($("div").get(0));

2.选择器

2.1 基本选择器(常用)
//1.标签选择器  $("标签名"):获取所有对应标签名的标签
$("div").css("background","teal");
//2.id选择器 : 获取对应id名的标签
$("#box").css("background","orangered");
//3.类选择器 :获取对应class名的标签  
$(".box").css("background","skyblue");
//注意:jquery没有优先级,只有先后顺序
//4.分组
$("p,#box").css("color","green");

//5.jQuery事件
$("div").click(function(){
    console.log("点击"); //获取下标
    //$().index(selector):给当前元素的父元素的所有子元素添加的下标
    console.log($(this).index("div"));
});
2.2 层次选择器(常用)
//后代选择器  父 子  
$("div span").css("color","pink");
// 子代选择器  父>子
$("div>span").css("color","green");
//+: 下一个兄弟  
$("h2+li").css("background","red");
//~:下面所有的兄弟
$("h2~li").css("background","red");

2.3 过滤选择器

2.3.1 基本过滤(eq常用)
$("ul li:first").css("background","green");
$("ul li:last").css("background","green");
$("ul li:nth-child(6)").css("background","orange");

//通过下标获取  :eq(下标)
$("ul li:eq(5)").css("background","orangered");
var n = 2;
$("ul li").eq(n).css("background","orangered");

//奇偶
$("ul li:even").css("background","pink");
$("ul li:odd").css("background","skyblue");

//大于gt(下标) 小于lt
$("ul li:lt(3)").css("background","red");
$("ul li:gt(2)").css("background","green");

//除了
$("ul li:not(.t)").css("background","pink")
2.3.2 属性过滤
//E[attr] : 获取有attr的E标签
$("div[class]").css("background", "red");

//E[attr=value] : 获取有attr属性并且值为value的E标签
$("div[class=wo]").css("background", "green");

//E[attr!=value] : 获取有attr属性并且值不为value的E标签
$("div[class!=wo]").css("background", "pink");

//E[attr^=value] : 获取有attr属性并且以value开头的E标签
$("div[class^=h]").css("background", "deeppink");

//E[attr$=value] : 获取有attr属性并且以value结尾的E标签
$("div[class$=x]").css("background", "green");

//E[attr*=value] : 获取有attr属性并且包含value的E标签
$("div[class*=x]").css("background", "orangered");

2.4 表单选择器

//表单选择器
console.log($(":input")); //获取表单元素  和类型无关
console.log($(":radio")); //获取单选框
console.log($(":checkbox")); //获取复选框
console.log($(":text")); //文本框


//获取选择框的选中项
console.log($(":radio:checked"));
console.log($(":checkbox:checked"));
console.log($(":checkbox:checked").length);

3.节点遍历(常用)

//1.找子节点  
//$().children(selector); 找直系的子元素
$("div").children("span").css("color","green");

//$().find(selector) :  找后代子元素
$("div").find("span").css("color","deeppink");

//2.找父节点
//$().parent(selector):找直接父元素
//console.log( $("span").parent()); //找直接父元素
console.log( $("span").parents()); //找所有的父元素

//3.找兄弟元素
//$("").next(selector) : 下一个
$(".box").next().css("background","#666"); 

//$("").nextAll(selector) : 下面所有的
$(".box").nextAll().css("background","#666"); 

//$("").prev(selector) : 上一个
$(".box").prev().css("background","skyblue"); 
//$("").prevAll(selector) : 上面所有的
$(".box").prevAll().css("background","skyblue"); 

//$().siblings(selector) 所有的兄弟
$(".box").siblings().css("background","orange");

4.操作标签属性

原生js:标签.属性名 = 属性值 : 操作系统固有属性

DOM:标签.setAttribute(“属性名”,“属性值”) 标签.getAttribute(“属性名”) : 操作固有和自定义属性

jQuery操作属性:

attr:(操作固有属性和自定义属性)

设置: $().attr(属性名,属性值)

获取: $().attr(属性名)

批量设置:$().attr({})

prop:(操作固有属性)

设置: $().prop(属性名,属性值)

获取: $().prop(属性名)

批量设置:$().prop({})

官方说法:操作固有属性,attr操作自定义,

具体使用:一般用attr,除了checked属性

//1.设置: $().attr(属性名,属性值)
$("#box").attr("id","box1");

//2.取: $().attr(属性名)
console.log($("div").attr("id"));

//3.批量设置:$().attr({})
$("div").attr({"id":"box","class":"active","index":1});


//4.prop
$("div").prop({"id":"wrap","class":"box","index":2});

// 一般用attr,除了checked属性
console.log($(":checkbox").attr("checked"));  //"checked"  undefined
console.log($(":checkbox").prop("checked"));  //true  false

5.操作标签样式

jquery:

设置:$().css(“属性名”,“属性值”)

获取:$().css(“属性名”)

批量操作:

设置: $().css({})

获取: $().css([])

//设置/获取元素的样式:$().css()  number  字符串加单位,因为margin值“200”无效
       $("div").css("width",200);
       $("div").css("height","200");
       $("div").css("margin","200px");
       $("div").css("background","red");

       //可以链式操作:$().css({})
       $("div").css({
           "width":100,
           height:100,
           backgroundColor:"pink",
           "background-color":"pink"
       });


       var pro = $("div").css(["width","height"]);
       console.log(pro); //{width: "100px", height: "100px"}

6.循环

//$.map:返回值可以组成一个新的数组返回
//$.map(循环项,function(value,index){})
//$(循环项).map(function(index,vlaue){})

//1.循环数组
var arr = ["a","b","c"];
$.map(arr,function(value,index){
    console.log(index+"----"+value); //0----a
});

//2.循环对象
var obj = {
    "name":"待定",
    "age":"1-100",
    "sex":"女"
}
$.map(obj,function(value,key){ 
    console.log(key+"----"+value); //name----待定
});


//3.循环标签
var s = 0;
/* $.map($("li"),function(elem,index){
            console.log(elem); //<li>4</li>
            s += parseInt($(elem).html());
        }); */
console.log(s); //21


//$(循环项).map(function(index,vlaue){})
/* $("li").map(function(index,elem){
            s += parseInt($(elem).html());
        });
        console.log(s); */




//$.each:循环,没有返回值
$("li").each(function(index,elem){
    s += parseInt($(elem).html());
});
console.log(s);