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选择器的更多相关文章

  1. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  3. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  4. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  5. 【学习笔记】锋利的jQuery（一）选择器

    一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...

  6. 汇总jQuery的61种选择器及示例

    汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...

  7. jQuery（2）——选择器

    选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...

  8. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  9. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  10. （jQuery知识点整理-含有选择器）

                                       第一单元                                       jQuery介绍:   javaScript ...

随机推荐

  1. 高级Java面试总结2

    1. JVM结构原理.GC工作机制详解 答:具体参照:JVM结构.GC工作机制详解     ,说到GC,记住两点:1.GC是负责回收所有无任何引用对象的内存空间. 注意:垃圾回收回收的是无任何引用的对 ...

  2. [SQL]LeetCode180. 连续出现的数字 | Consecutive Numbers

    SQL架构: Create table If Not Exists Logs (Id int, Num int) Truncate table Logs insert into Logs (Id, N ...

  3. [Swift]LeetCode822. 翻转卡片游戏 | Card Flipping Game

    On a table are N cards, with a positive integer printed on the front and back of each card (possibly ...

  4. python之Django学习笔记（二）---Django从工程创建、app创建到表建模在页面的显示

    创建工程: 在命令行中切换目录至需要创建工程的目录,然后在命令行中输入如下命令创建djangoTestPro工程 D:\PycharmProjects\untitled\MyTestProject&g ...

  5. Python数据分析(一): ipython 技巧！

    不一定非得使用Jupyter Notebook,试试ipython命令行 安装 ipython 我只试过Windows 10环境下的. 1.安装python安装包之后,应该就有ipython了. 2. ...

  6. MySQL查询昨天的数据

    SELECT * FROM `表名` WHERE TO_DAYS(`时间字段名`) = TO_DAYS(NOW()) - 1; 需要前几天的话就在后面减几天.

  7. 【转】kali配置--修改IP和DNS

    修改IP地址 1 编辑文件 nano /etc/network/interfaces 2 在选择静态IP或DHCP,编辑文件内容并保存退出 (1)静态IP: ``` #Loop回环地址 auto lo ...

  8. 【干货】Chrome插件(扩展)开发全攻略

    写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github ...

  9. C#版 - Leetcode 414. Third Maximum Number题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  10. 【WCF系列】（四）WCF客户端怎么消费服务

    WCF客户端怎么消费服务 获取服务绑定协议.绑定和地址:实现方式 SvcUtil方式:SvcUtil.exe是一个命令行工具,位于:C:\Program Files (x86)\Microsoft S ...