JQuery入门基础知识_jquery infinite-CSDN博客

本文链接：https://blog.csdn.net/infinite_xy/article/details/107009251

JQuery

js库，js封装

使用前必须先导入js文件(http://www.jquery.com)

//通过id属性来获取标签的元素

let jq=$("#标签名")

js&JQuery对象转换

JS对象：以前通过DOM中方法获得的元素都是JS对象，如：document.getElementById(“id”)
jQuery对象：通过jQuery选择器选中元素，就是jQuery对象,jQuery拿到的对象类型类似数组

//js-->jquery
let jq=$(js);
//jquery-->js
let js=JQ对象[0] 或 JQ对象.get(0)
JQ对象本质上是JS的一个数组对象

事件的使用

常用事件

事件方法	功能
blur()	失去焦点
change()	改变事件
click()	单击事件
dblclick()	双击事件
focus()	得到焦点
keydown()	键盘按下
keyup()	松开键盘
mouseover()	鼠标移上
mouseout()	鼠标移出
submit()	表单提交

绑定事件

js事件去掉on：onclick——>click

el = $("#myid")
// 第一种绑定方式
el.click(function() {
    逻辑
})

//第二种
el.on("click", function() {})

子标签.click()

$(“标签名”).事件（）//给所有此标签绑定事件
对象.on（事件名称，执行的功能）

解绑

对象.off（事件名称）；不指定取消所有事件

$("#btn1").on("click",function(){
alert("hello")
});
$("#btn2").on("click",function(){
$("#btn1").off("click");
});

事件的多绑定

单独定义

 // 方式一 单独定义
    $("#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");
    });

操作标签体内容

Element对象提供了获取和操作标签体的API

获取标签体内容：let inner = 标签element.innerHTML
设置标签体内容：标签element.innerHTML = "新的标签体内容"
- 是覆盖式设置
- 设置的html代码会生效

遍历

传统方式

let lis = $("li");
for(let i = 0 ; i < lis.length; i++) {
    alert(i + ":" + lis[i].innerHTML);//js对象才有innerHtml属性
}

对象.each（）

let lis = $("li");
lis.each(function(index,ele){
        alert(index + ":" + ele.innerHTML);
}); //each方式遍历

$.each()

 function each(els, func) {
        //遍历基本框架使用els数组信息
        //每一次打印的逻辑调用用户传过来的函数
        for(let i = 0 ; i < els.length; i++) {
            func(i, els[i]) //调用函数的方式打印
        }
    }

for of 语句遍历

  let lis = $("li");
        for(ele of lis){
            alert(ele.innerHTML);
        }

选择器

基本选择器

元素选择器(“元素名称”)
id选择器("#id")
类选择器(".class")

层级选择器

后代选择器: 获取A元素内部所有B元素，B是A的子孙元素

$(“A B”)
子选择器: 获得A元素下面的所有B子元素

$(“A> B”)
兄弟选择器: 获得A元素同级，下一个B元素。(B和A是兄弟关系，A是老二，B是老三)

$(“A + B”)
兄弟选择器: 获取A元素后面所有同级B元素。(B是A后面所有的兄弟，得到一个集合)

$(“A ~ B”)

属性选择器

属性名选择器

$(元素[“属性名”])
```
let in1 = $("input[type]");
```
属性值选择器

$(“元素[属性名=‘属性值’]”)

//获取所有input并且该input 必须包含type属性且值为password
let in2 = $("input[type='password']");

DOM

操作文本

html方法：解析标签
- el.html(), 没有参数就是获取html内容
- el.html(“内容”), 设置html文本内容
text方法：不解析标签
- 获取 text（）
- 设置text（“内容”）

操作对象

创建元素
- $(“元素”) 创建指定元素
添加（父子关系）
- append(element) 添加成最后一个子元素，由添加者对象调用
- appendTo(element) 添加成最后一个子元素，由被添加者对象调用
- prepend(element) 添加成第一个子元素，由添加者对象调用
- prependTo(element) 添加成第一个子元素，由被添加者对象调用
添加（兄弟关系）
- before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
- after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
删除
- remove() 删除指定元素(自己移除自己)
- empty() 清空指定元素的所有子元素

样式操作

css方法
1. css(“样式名”)，获取当前样式名的属性值
2. css(“样式名”， “样式值”)，设置样式
操作class属性
1. addClass(“类名”)
2. removeClass，删除
3. toggleClass（“类名”），没有当前类名就添加，否则反之

操作属性

attribute，属性
1. attr(“name”), 获取name属性的值
2. attr(“name”, “value”), 设置值
propertie，属性
1. prop(“name”,[value]), 获得/设置属性的值，操作的是复选框\选择类(checked，selected)

随机点名案例小程序（渣渣版）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
    <style >
        .bigbox{
            border: solid;color:red;
            height: 100%;
            width: 80%;
            box-sizing: border-box;
        }
       .box{
           border:solid;color: coral;
           height: 20px;width: 40px;
           float: left;
           font-size: 2px;
           box-sizing:  border-box;
		} 
    </style>
</head> 
<body>
    <div class="bigbox"  >
        <table>
            <tr>
                <div style="text-align: center;color:darkorange;font-size:x-large;">随机点名</div>

            </tr><br>
            <tr>
                <div id="time" style="float: right; border: groove;color: black;height: 20px;width: 120px;font-size: x-small;">
                </div>
            </tr><br>
            <tr>   
            <div id="play" style="text-align: center;"></div> 
            </tr><br>
            <tr>
               <div id="name" "></div>
            </tr><br>
            <br><tr>
                <div style="text-align: center;">
                    <button id="start">点击开始</button> &nbsp;&nbsp;&nbsp;
                    <button id="end">点击结束</button>
                </div>        
            </tr>
        </table>

    </div>
</body>
<script src="./jquery-3.3.1.min.js"></script>
<script>
    //获取当前系统时间，以本地时间格式字符串形式写入时间显示框
  var date=new Date();
  var s=date.toLocaleString();
$("#time").get(0).innerHTML=s;
    // 定义名单字符串
let sname="杨崇鑫,母天鑫,宋小明,墙世川,冯思皓,熊国良,汪家鹏,王一舟,黄海,魏鑫,彭清亮,乐健华,李坤耀,向贞好,吴世林,杜凯,杜江,杜林,付帅,杨玺,高茂鑫,何瓜瓜,王振,黄云,黄国余,刘坤,刘源";
    //通过切割字符串得到名字数组
var arr=sname.split(",");
for(let i=0;i<arr.length;i++){
    let a=document.getElementById("name")
    var b=document.createElement("div");
        //设置id属性,方便寻找
        b.setAttribute("id",i); 
		//方便给小div设置样式
        b.setAttribute("class","box"); 
        //设置小div中显示的内容
        b.innerHTML = arr[i];
        //将小div放在父容器中       
        a.appendChild(b);                          
}
var timer;
$("#start").click(function(){
    clearInterval(timer);
    timer=setInterval(function(){
    var sjnum=Math.floor((Math.random()*arr.length));
    for(let i=0;i<arr.length;i++){
        $($(".box")[i]).css("background","white")  
}
    $($(".box")[sjnum]).css("background","yellow");  
    $("#play").get(0).innerHTML=arr[sjnum];
    },50);
});

$("#end").click(function(){
    clearInterval(timer); 
}).mouseout(function(){$(".box").css("background","white")});

</script>
</html>