JQuery基本语法&&选择器&&DOM

JQuery基本语法&&选择器&&DOM

jQuery 快速入门

jQuery介绍

  JS 框架:使用 JS 来编写的,框架本身是一个半成品。类似于房子中毛坯房。需要程序员在这个基础上再次开发，实现各种功能
   jQuery 框架只是众多 JS 框架中一个
      
jQuery 是一个 JavaScript 库  -->轻量级JS框架 
   所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。 
     
   jQuery： jQuery 框架功能强大，使用简单，占用资源少。免费，开源 
     1.兼容CSS3和各大浏览器
     2.提供了dom、events、animate、ajax等的简易操作
     3. 还有非常丰富的插件：别人用jQuery写好的功能代码
     4. jQuery本质是js，但是功能更强、更简洁

jQuery 快速入门步骤

1. 编写 HTML 文档。
2. 引入 jQuery 文件。
3. 使用 jQuery 获取元素。
4. 使用浏览器测试。

入门案例

<script src="js/jquery-3.3.1.min.js"></script>
    //第一步导包
<script>
    // JS方式，通过id属性值来获取div元素
    let jsDiv = document.getElementById("div");
    //alert(jsDiv);
    //alert(jsDiv.innerHTML);

    // jQuery方式，通过id属性值来获取div元素
    let jqDiv = $("#div");
    alert(jqDiv);
    alert(jqDiv.html());
</script>

jQuery 基本语法

一 JS 对象和 jQuery 对象转换

    jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，
        二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。   

1.JS对象和jQuery对象的区别

JS 对象：如果使用以前的 JS 代码得到的对象是 JS 对象，如：document.getElementById("id")
    
jQuery 对象：如果使用 JQ 选择器得到的对象是 JQ 对象，如：$("#id")    

2.为什么要转换

js 中的方法与 jq 中的方法，事件都是不同的。有时一个 JS 对象需要调用 JQ 中方法，就必须将 JS 对象转成JQ 对象才可以调用，反之亦然

JS 的 DOM 对象转换成 jQuery 对象

$(JS 的 DOM 对象);

jQuery 对象转换成 JS 对象

方式一
jQuery 对象[索引];
方式二
jQuery 对象.get(索引);

注:
JQ 对象本质上在 JS 中是一个数组对象
JQ 对象.get(0) 或 JQ 对象[0]

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // JS方式，通过id属性值获取div元素
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);//调用js中的属性innerHTML
    //alert(jsDiv.html());  JS对象无法使用jQuery里面的功能

    // 将 JS 对象转换为jQuery对象
    let jq = $(jsDiv);
    alert(jq.html());//调用jq的方法html()


    // jQuery方式，通过id属性值获取div元素
    let jqDiv = $("#div");
    alert(jqDiv.html());
    // alert(jqDiv.innerHTML);   jQuery对象无法使用JS里面的功能
     
    // 将 jQuery对象转换为JS对象 方式一
    let js = jqDiv[0];
//方式二
  // let js = jqDiv.get(0);
    alert(js.innerHTML);//调用js中的属性
</script>

二 jQuery事件

事件的使用

事件名	说明
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容

• 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法

  js事件写法	jQuery事件写法
  onclick单击	click(fn)
  ondblclick双击	dblclick(fn)
  onsubmit表单提交	submit(fn)
  onchange域内容改变	change(fn)
  onload加载完成	$(fn),$(document).ready(fn)
  onfocus获取焦点	focus(fn)
  onblur失去焦点	blur(fn)
  onkeydown键盘按键按下	keydown(fn)
  onkeypress键盘按键按下、按住	keypress(fn)
  onkeyup键盘按键弹起	keyup(fn)
  onmousedown鼠标按键按下	mousedown(fn)
  onmouseup鼠标按键弹起	mouseup(fn)
  onmouseover鼠标移入	mouseover(fn)
  onmouseout鼠标移出	mouseout(fn)
  onmousemove鼠标移动	mousemove(fn)

 //单击事件
 $("#btn").click(function(){
   
     alert("点我干嘛?");
 });
 //获取焦点事件
 // $("#input").focus(function()
 //     alert("你要输入数据啦...
 // });
 //失去焦点事件
 $("#input").blur(function(){
   
     alert("你输入完成啦...");
 });

事件的绑定 方式一

jQuery 对象.on(事件名称,执行的功能); 

事件的解绑

jQuery 对象.off(事件名称);

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

<script>
    //给btn1按钮绑定单击事件
    $("#btn1").on("click",function(){
   
        alert("点我干嘛?");
    });

    //通过btn2解绑btn1的单击事件
    $("#btn2").on("click",function(){
   
        $("#btn1").off("click");
    });
</script>

事件的切换

• 事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

方式一：单独定义
    $(元素).事件方法名1(要执行的功能);
    $(元素).事件方法名2(要执行的功能);
    …
 
方式二：链式定义
    $(元素).事件方法名1(要执行的功能)
    .事件方法名2(要执行的功能);
    …       

例如

<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一 单独定义
    // 鼠标移入颜色变红
    // $("#div").mouseover(function(){
   
    //     //背景色：红色
    //     //$("#div").css("background","red");
    //     $(this).css("background","red");
    // });
    //鼠标移出颜色变蓝
    // $("#div").mouseout(function(){
   
    //     //背景色：蓝色
    //     //$("#div").css("background","blue");
    //     $(this).css("background","blue");
    // });
     ...
    //方式二 链式定义
    $("#div").mouseover(function(){
   
        $(this).css("background","red");
    }).mouseout(function(){
   
        $(this).css("background","blue");
    });
</script>

三 遍历

方式一 传统方式
   for(let i = 0; i < 容器对象长度; i++){
   
        执行功能;
        } 

方式二：对象.each() 方法
    容器对象.each(function(index,ele){
   
        执行功能;
        });

 方式三：$.each() 方法
     $.each(容器对象,function(index,ele){
   
        执行功能;
        });

 方式四：for of 语句
     for(ele of 容器对象){
   
        执行功能;
        }

案例 点击遍历按钮实现遍历

<body>
    <input type="button" id="btn" value="遍历列表
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>

方式一: 传统方式

 $("#btn").click(function(){
   
     let lis = $(