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. React Native 0.50版本新功能简介

    React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...

  2. Asp.Net Core中使用Swagger，你不得不踩的坑

    很久不来写blog了,换了新工作后很累,很忙.每天常态化加班到21点,偶尔还会到凌晨,加班很累,但这段时间,也确实学到了不少知识,今天这篇文章和大家分享一下:Asp.Net Core中使用Swagge ...

  3. 大数据与云计算的关系是什么，Hadoop又如何参与其中？Nosql在什么位置，与BI又有什么关系？

    大数据与云计算的关系是什么,Hadoop又如何参与其中,Nosql在什么位置,与BI又有什么关系?以下这篇文字讲他们的关系讲的非常清楚.  在谈大数据的时候,首先谈到的就是大数据的4V特性,即类型复杂 ...

  4. [Swift]LeetCode889. 根据前序和后序遍历构造二叉树 | Construct Binary Tree from Preorder and Postorder Traversal

    Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...

  5. Python内置函数(39)——locals

     英文文档: locals() Update and return a dictionary representing the current local symbol table. Free var ...

  6. BBS论坛（十二）

    12.1.图形验证码生成 (1)utils/captcha/init.py import random import string # Image:一个画布 # ImageDraw:一个画笔 # Im ...

  7. JVM基础系列第11讲：JVM参数之堆栈空间配置

    JVM 中最重要的一部分就是堆空间了,基本上大多数的线上 JVM 问题都是因为堆空间造成的 OutOfMemoryError.因此掌握 JVM 关于堆空间的参数配置对于排查线上问题非常重要. tips ...

  8. CentOS开发ASP.NET Core入门教程

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...

  9. asp.net core系列 31 EF管理数据库架构--必备知识 反向工程

    一.   反向工程 反向工程是基于数据库架构,生成的实体类和DbContext类代码的过程,对于Visual Studio开发,建议使用PMC.对于其他开发环境,请选择.NET Core CLI工具( ...

  10. 华为oj之字符串分割

    题目: 字符串分隔 热度指数:6139 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 •连续输入字符串,请按长度为8拆分每个字符串后输出到新的字符串数组: •连续输入字符串, ...