Jquery 使用和Jquery选择器

Posted 2021-02-12 bignewbie

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 使用和Jquery选择器相关的知识，希望对你有一定的参考价值。

jQuery中的顶级对象（$）

jQuery 中最常用的对象即 $ 对象，要想使用 jQuery 的方法必须通过 $ 对象。只有将普通的 Dom 对象封装成 jQuery 对象，然后才能调用 jQuery 中的各种方法。 $ 是 jQuery 简写，在代码中可以使用 jQuery 代替$ $ ，但一般为了方便大家都直接使用 $。

例如;

通过和javascript对比

//Window.onload=function(){} 页面中只能存在一个
window.onload=function () {
console.log(" 页面完全加载后才触发该事件");
};
//$(document).ready(function(){}); 可以存在多个
$(docElem).ready(function () {
console.log("1");
});
//$(document).ready(function(){}); 只要 DOM 元素加载完就触发
$(docElem).ready(function () {
console.log("2");
});

// 想在 jquery 中实现 window.onload
$(window).load(function () {
alert(" 哈哈1");
});
$(window).load(function () {
alert(" 哈哈2");
});
// 速度明显比 window.onload 快
$(document).ready(function () {
alert(" 嘎嘎");
});

Window.onload只能写一次,重复会被后面的干掉页面所有的标签,图片,外部引入加载后才触发$(document).ready()DOM基本标签加载后就触发可以写多个$(document).ready()和$(function)一样

Jquery对象和DOM对象互转

DOM对象转Jquery对象操作方便,毕竟Jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便.Jquery对象转DOM对象,因为Jquery中文件一直在更新，很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,所以,jquery对象有的时候需要转成dom对象来进行操作。

1.dom对象转成jquery对象,加$就可以了

例如：

/*取得<input>标签中的value属性的内容[dom对象->jquery对象]
        var inputElement = document.getElementById("inputID");//DOM对象
        var $input = $(inputElement);//jQuery对象
        var value = $input.val();
        alert(value);
        */

2.jquery对象转dom对象

例如：

/*取得<div>标签中的文本内容[jquery对象->dom对象，方法一]
        var $div = $("#divID");//jQuery对象
        var divElement = $div[0];//DOM对象
        var html = divElement.innerHTML;
        alert(html);
        */
        
        //取得<div>标签中的文本内容[jquery对象->dom对象，方法二]
        var $div = $("#divID");//jQuery对象
        var divElement = $div.get(0);//DOM对象
        var html = divElement.html();
        alert(html);

注意:jquery 对象不能直接调用 dom 中对象的属性或者是方法,反之一样

例如：

$(function () {
var dv1 = $("#dv");// 由 jquery 对象转成了 dom 对象
var dv2 = document.getElementById("dv");// 对象
// 必然报错 , 为什么 ? 因为 jquery 对象不能直接调用 dom 中对象的属性或者是方法
dv1.innerHTML = "<p> 哈哈</p>";
// 同理 , 下面这行代码必然报错 , 为什么呢 ? 因为 dom 对象是不能直接调用 jquery 对象的方法的
dv2.html("<p> 哈哈</p>");
});

jQuery案例

网页开关灯，点击按钮实现网页开关灯效果（通过和JavaScript对比）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-1.12.2.js"></script>
    </head>
    <body>
        <input type="button" value="关灯" id="btn">
        
        <script>
            //JavaScript
            /*window.onload = function(){
                document.getElementById(‘btn‘).onclick = function(){
                    if(this.value == ‘关灯‘){
                        document.body.style.backgroundColor = ‘black‘;
                        this.value = ‘开灯‘;
                    }else{
                        document.body.style.backgroundColor = ‘white‘;
                        this.value = ‘关灯‘;
                    }
                };
            };*/
            
            
            
            //jQuery
            $(function(){
                $(‘#btn‘).click(function(){
                    if($(this).val()==‘关灯‘){
                        $(‘body‘).css(‘background-color‘,‘black‘);
                        $(this).val(‘开灯‘);
                    }else{
                        $(‘body‘).css(‘background-color‘,‘white‘);
                        $(this).val(‘关灯‘);
                    }
                });
            })
            
        </script>
    </body>
</html>

JQuery选择器

1.jQuery 选择器实现了从CSS1 到CSS3 的所有选择器
2.jQuery和JS设置css属性的不同：

jquery:   $(#id").css(‘background‘,"red") 
JS:       dom.style.backgroundColor="red‘

3.$(“#demo”): 选择 id为demo的第一个元素（id选择器）

$("#demo").css(‘background‘,‘black")   //有多个只选择第一个

4.$(“.item”) : 选择所有class为item的元素（类选择器）

$(".item").css(‘background‘,‘black")

5.$(‘div’) : 选择所有标签为div的元素（标签选择器）

$(‘div‘) .css(‘background‘,‘black")

6.$(“*”) : 选择所有的元素，配合其他选择器来使用

$("*").css(‘background‘,‘black")

7.$(‘.item,div’) : 选择多个指定的选择器，这里是指item和div元素

$(‘.item,div‘) .css(‘background‘,‘black")

8.层级选择器

（1）后代选择器

　　$(“#dv li”)或者$(“ul li”)或者$(“.cls li”)

（2）子代选择器(直接的所有子元素,儿子)

　　$(“#ul>li”)或者$(“div >span”)或者$(“.cls >li”)

（3）获取当前元素的相邻元素:

　　$(“div + span”)
（4）获取当前元素后面所有元素
　　$(“div ~ span”)

9.索引选择器

　　eq(3) 获取索引的元素
　　gt(3) 索引大于3 的所有元素
　　lt(3) 索引小于3 的所有的元素

$("#u1 li:eq(7)").css("backgroundColor","red");
$("#u1 li:gt(7)").css("backgroundColor","green");
$("#u1 li:lt(5)").css("backgroundColor","black");

规律：jQuery完全是结合了css获取class的模式来操作dom

$(selector).css(‘background‘,‘black")

jQuery几个常见的方法（更多方法参考离线手册，地址：链接：https://pan.baidu.com/s/1IhRT7L68F_CGcqMdhm-Nmw 提取码：0ue5 ）

1. .html() 方法,设置标签中间显示其他标签及内容,类似于innerHTML
2. .text() 方法,设置标签中间显示的文本内容,类似于innerText
3. .val() 方法.设置input标签中value的值,类似于value

4. .css() 方法,.设置元素的样式,类似于style

注意::
()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值
.css()写的是键值对

特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

以上是关于Jquery 使用和Jquery选择器的主要内容，如果未能解决你的问题，请参考以下文章