jQuery初识、 jQuery和DOM对象的关系、表单选择器、节点遍历(常用)、操作标签属性 样式、循环 21

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);