AQS

jQuery

• jQuery也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库
• 它的核心思想时write less，do more（写的更少，做得更多），所以它实现了很多浏览器的兼容问题
• jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery
• jQuery是免费，开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象，选择DOM元素，制作动画效果，事件处理，使用Ajax以及其他功能

jQuery是封装了js的一个前端框架，可以写更少的代码，做更多的事情

jQuery中的$

jQuery中的$是一个函数

为按钮添加点击响应函数

1.使用jQuery查询到标签对象

2.使用标签对象.click(function(){});

$ 是jQuery的一个核心函数，通过$可以选择元素，还可以去定义函数等等

通过$来声明jQuery中的文本就绪函数:

​ $(function{

​ })

原生js的文本就绪函数

​ Window.onload = function(){

​ }

引入jQuery控件

通过相对路径引入jQuery控件

<!--引入jQuery控件-->
<script src="../jQuery/jquery-1.7.2.js"></script>

//jQuery中的文本就绪函数
$(function(){

    let elementById = document.getElementById("id");

    alert(elementById);

})

通过jQuery的方式来选择html对象

​ jQuery中的选择器：

​ 最基本的几种选择器：id选择器、class选择器、标签选择器

//通过jQuery中的id选择器来选择标签
let inputEl = $("#id")

//[object Object] 这种形式的对象是jQuery对象，不是dom对象
alert(inputEl);

//通过class选择器来选择标签对象
let classEl = $(".class");

alert(classEl);

通过jQuery选择器选择的对象是一个jQuery对象，并不是dom对象，但是在jQuery底层封装的是dom对象，jQuery对象的本质就是dom对象数组

//通过jQuery动态绑定的方式来绑定单击事件
$(function (){

    let clickEl = $("#click");

    //绑定单击事件
    clickEl.click(function (){

        alert("通过jQuery的方式来注册单击事件")

    })

})

-------------------------------------------------------

let elementById = document.getElementById("click");

elementById.onclick = function (){

    alert("通过js的方式来注册单击事件")

}

jQuery针对dom对象的所有属性都封装了对应的方法，dom对象中 onclick属性，jQuery中就封装了click()

注：jQuery对象只能调用jQuery提供的方法，不能调用dom中的属性，dom对象只能调用属性，不能调用方法

jQuery核心函数（文本就绪函数）

• $是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用$这个函数
• 传入参数为 函数 时：表示页面加载完成之后，相当于 window.onload = function(){}
• 传入参数为 HTML字符串 时：会为我们创建这个html标签对象
• 传入参数为 DOM对象 时：会把这个dom对象转换为jQuery对象

function test(){

    let input = $("<input type='button' value='123456'>");

    $("#body").append(input);

}

//定义一个文本就绪函数
$(function (){

    let jQueryObj = $(".text");

    //[object Object] jQuery对象
    alert(jQueryObj);

    let domObj = document.getElementById("text");

    //[object HTMLInputElement] dom对象
    alert(domObj);

    //将dom对象转成jQuery对象
     let jQueryObj02 = $(domObj);

     //[object Object] jQuery对象,获取jQuery对象的值
     alert(jQueryObj02.val());

})

jQuery对象和dom对象区分

Dom对象

• 通过getElementById()查询出来的标签对象是Dom对象
• 通过getElementsByName()查询出来的标签对象是Dom对象
• 通过getElementsByTagName()查询出来的标签对象是Dom对象
• 通过createElement()方法创建的对象，是Dom对象

jQuery对象

• 通过jQuery提供的API创建的对象，是jQuery对象
• 提供jQuery包装的Dom对象，也是jQuery对象
• 通过jQuery提供的API查询到的对象，是jQuery对象

jQuery对象的本质

jQuery对象是dom对象的数组 + jQuery 提供的一系列功能函数

• jQuery对象不能使用DOM对象的属性和方法
• DOM对象也不能使用jQuery对象的属性和方法

遍历jQuery对象

//通过属性过滤选择器选择所有被选中的多选框
    function test01(){

        let $hobby = $(".hobby:checked");

        //遍历被选中的多选框
        $hobby.each(function (){

            //dom对象直接通过value属性取值
            alert(this.value);

        })

        //遍历方法2,for循环遍历
        for (let i = 0; i < $hobby.length; i++) {

            //封装成jQuery对象后取值
            alert($($hobby[i]).val());

        }
        
        //组合选择器
        $("input,p.myClass").each(function (){

            alert(this)

        })
        
    }

Dom对象和jQuery对象互转

dom对象转化为jQuery对象

• 先有DOM对象
• $(DOM)就可以转化成jQuery对象

jQuery对象转换为dom对象

• 先有jQuery对象
• jQuery对象[下标]取出相应的DOM对象

jQuery选择器

基本选择器

• #ID 选择器：根据id查找标签对象

• .class 选择器：根据class查找标签对象

• element 选择器：根据标签名查找标签对象

• * 选择器：表示任意的，所有的元素

• selector1，selector2 组合选择器：将符合选择器1或2的结果返回 （或的关系）

• selector1selector2 组合选择器：将符合选择器1且选择器2的结果返回(且的关系)

**Tips:**jQuery的id选择器只支持，单词、阿拉伯数字、下划线、中划线，其中单词，包括英文字母、汉字，但是控件id属于客户不可见内容，实际中开发人员是不用汉字作为id的， 这里不考虑

层级选择器

• ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
• parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
• prev + next 相邻元素选择器：匹配所有紧接在prev元素后面的next元素
• prev ~ siblings 之后的兄弟元素选择器：匹配prev元素之后所有siblings元素

过滤选择器

• :first 获取第一个元素

• :last 获取最后个元素

• :not(selector) 去除所有与给定选择器匹配的元素

• :even 匹配所有索引值为偶数的元素，从0开始计数

• :odd 匹配所有索引值为奇数的元素，从0开始计数

• :eq(index) 匹配一个给定索引值的元素

• :gt(index) 匹配所有大于给定索引值的元素

• :It(index) 匹配所有小于给定索引值的元素

• :header 匹配如 h1，h2，h3 之类的标题元素

• :animated 匹配所有正在执行动画效果的元素

内容过滤器

• :contains(text) 匹配包含给定文本的元素
• :empty 匹配所有不包含子元素或者文本的空元素
• :parent 匹配含有子元素或者文本的元素
• :has(selector) 匹配含有选择器所匹配的元素的元素

属性过滤器

• [attribute] 匹配包含给定属性的元素
• [attribute=value] 匹配给定的属性是某个特定值的元素
• [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
• [attribute^=value] 匹配给定的属性是以某些值开始的元素
• [attribute$=value] 匹配给定的属性是以某些值结尾的元素
• [attribute*=value] 匹配给定的属性是以包含某些值的元素
• [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

/*属性过滤选择器*/
$("[value]").each(function (){

    alert(this.value)

})

/*匹配具有value属性并且value值等于1的元素*/
$("[value=test1]").each(function (){

    alert(this.value)

})

/*过滤value属性值以t开头的元素*/
$("[value^=t]").each(function (){

    alert(this.value)
    
})


/*过滤value属性值包含es的元素*/
$("[value*=es]").each(function (){

    alert(this.value)

})

/*复合属性选择器，选择value包含es，并且value以1结尾的元素*/
$("[value*='es'][value$='1']").each(function (){

    alert(this.value)

})

表单过滤器

• :input 匹配所有 input，textarea，select，和 button 元素
• :text 匹配所有 文本输入框
• :password 匹配所有的密码输入框
• :radio 匹配所有的单选框
• :checkbox 匹配所有的复选框
• :submit 匹配所有提交按钮
• :image 匹配所有img标签
• :reset 匹配所有重置按钮
• :button 匹配所有 input type=button <button>按钮
• xxxxxxxxxx window.onload = function (){​    //返回一个dom对象    let elementBody = document.getElementById(“body”);​    //获取所有的子节点    let childNodes = elementBody.childNodes;​    for (let i = 0; i < childNodes.length; i++) {​        alert(childNodes[i]);​   }​    let firstChild = elementBody.firstChild;​    //文本对象    alert(firstChild);​    let lastChild = elementBody.lastChild;​    alert(lastChild);​    let elementButton = document.getElementById(“test1”);​    let parentNode = elementButton.parentNode;​    }javascript
• :hidden 匹配所有不可见元素 display:none 或 input

表单对象属性管理器

• :enabled 匹配所有可用元素
• :disabled 匹配所有不可用元素
• :checked 匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
• :selected 匹配所有选中的 option

jQuery元素筛选

• eq() 获取给定索引的元素 功能跟 :eq() 一样
• first() 获取第一个元素 功能
• last() 获取最后一个元素 功能跟 :last一样
• filter(exp) 留下匹配的元素
• is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
• has(exp) 返回包含有匹配选择器的元素的元素
• not(exp) 删除匹配选择器的元素
• children(exp) 返回匹配给定选择器的子元素功能
• find(exp) 返回匹配给定选择器的后代元素

jQuery的属性操作

• html() 它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样。
• text() 它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样。
• val() 它可以设置和获取表单项的value属性值，跟dom属性value一样
• attr() 可以设置和获取属性的值
• prop() 可以设置和获取属性的值

遍历jQuery对象

let hobbyEls = $(".hobby");

alert(hobbyEls)

for (let i = 0; i < hobbyEls.length; i++) {

    //[object HTMLInputElement]
    alert(hobbyEls[i]);

}

//jQuery中的遍历方法
        hobbyEls.each(function (){

            //this 是遍历时获取到的dom对象
            //[object HTMLInputElement]
            alert(this.value + " dom");
            
            alert($(this).val() + " jQuery");

        })

 //标签选择器
        $("input").each(function (){

            alert(this);

        })

属性过滤选择器

//通过属性过滤选择器选择所有被选中的多选框
function test01(){

    let $hobby = $(".hobby:checked");

    //遍历被选中的多选框
    $hobby.each(function (){

        alert(this.value);

    })


}


//通过属性值过滤标签
$("[name = 'hobby']").each(function (){


            alert(this)

        })

jQuery的属性操作

• html() 它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样
• text() 它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样
• val() 它可以设置和获取表单项的value属性值，跟dom属性value一样
• attr() 可以设置和获取属性的值
• prop() 可以设置和获取属性的值

动态注册方法

 //文本就绪函数
    $(function (){

        //全选
        $("[value = '全选']").click(function (){

            //遍历所有的多选框
            $(".hobby").each(function (){

                //将标签的checked设置为true
                $(this).prop("checked",true)

            })

        })

        //全不选
        $("[value = '全不选']").click(function (){

            //遍历所有的多选框
            $(".hobby").each(function (){

                //将标签的checked设置为false
                $(this).prop("checked",false)

            })

        })

        //反选
        $("[value = '反选']").click(function (){

            //遍历所有的多选框
            $(".hobby").each(function (){

                //将标签的checked设置为取非
                $(this).prop("checked",!this.checked)

            })

        })

    })

通过jQuery和js原生两种方法实现用户注册规范提示

$(function (){

    let u = new RegExp("^[A-z][A-z0-9-_]{3,16}$");

    let ps = new RegExp("[A-z0-9-_+*?!]{3,16}$");


    /*jQuery*/
    let usernameEl = $("#username");

    usernameEl.blur(function (){

        let username = $("#username").val();

        if (u.test(username)){

            $("#usernameSpan").text("用户名合法");

            $("#usernameSpan").prop("style","color:green");


        }else {

            $("#usernameSpan").text("用户名不合法");

            $("#usernameSpan").prop("style","color:red");

        }

        if (username.length == 0){

            $("#usernameSpan").text("");

        }

    })

    /*js原生*/
    let passwordEl = document.getElementById("password");

    passwordEl.onblur = function (){

        let password = passwordEl.value;

        let passwordSpan = document.getElementById("passwordSpan");

        if (ps.test(password)){

            passwordSpan.innerText = "密码合法";

            passwordSpan.style = "color:green";

        }else {

            passwordSpan.innerText = "密码不合法";

            passwordSpan.style = "color:red";

        }

        if (password.length == 0){

            passwordSpan.innerText = "";

        }

    }

})

DOM的增删改

内部插入:

• a.appendTo(b)把a插入到b子元素末尾，成为最后一个子元素
• prependTo() a.prependTo(b)把a插到b所有子元素前面，成为第一个子元素

$("body").append("<input type='button' value='123456'>")
$("<input type='button' value='123456'>").appendTo($("span"));

外部插入:

• insertAfter() a.insertAfter(b)
• insertBefore() a.insertBefore(b)

替换:

replaceWith() a.replaceWith(b) 用b替换掉a

replaceAl() a.replaceAll(b) 用a替换掉所有b

删除：

remove() a.remove(); 删除a标签

empty() a.empty(); 清空a标签里的内容

$("a").remove();
$("a").empty();

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以邮件至 1300452403@qq.com