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. 【安富莱专题教程第7期】终极调试组件Event Recorder，各种Link通吃，支持时间和功耗测量，printf打印，RTX5及中间件调试

    说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃.  ...

  2. Tomcat线程池配置

    简介  线程池作为提高程序处理数据能力的一种方案,应用非常广泛.大量的服务器都或多或少的使用到了线程池技术,不管是用Java还是C++实现,线程池都有如下的特点:线程池一般有三个重要参数: 最大线程数 ...

  3. oracle 分析函数和开窗函数

    最近遇到一个需求,将查询出的数据按照地区分组,随机取出每个区域的2条数据,这里用到了oracle的分析和开窗函数: 最终写出的sql如下: select * from (select region,r ...

  4. [Swift]LeetCode128. 最长连续序列 | Longest Consecutive Sequence

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. Y ...

  5. 什么是REST接口

    转载自:http://baijiahao.baidu.com/s?id=1591007540303121112&wfr=spider&for=pc 从事web开发工作有一小段时间,RE ...

  6. Node.js 多版本安装

    Node.js 多版本安装 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine(Node.js 是一个基于 ...

  7. Guava 源码分析（Cache 原理 对象引用、事件回调）

    前言 在上文「Guava 源码分析(Cache 原理)」中分析了 Guava Cache 的相关原理. 文末提到了回收机制.移除时间通知等内容,许多朋友也挺感兴趣,这次就这两个内容再来分析分析. 在开 ...

  8. 准备PPT过程中的一些文档记录

    http://jm.taobao.org/2016/12/23/20161223/ https://www.csdn.net/article/2015-02-10/2823900 https://da ...

  9. AspNetCore 基于流下载文件与示例代码

    昨天说了,AspNetCore如何进行上传文件,其中写了两种方式ajax与模型,其文章地址为:https://www.cnblogs.com/ZaraNet/p/9949167.html 那么既然有上 ...

  10. 获取Ip所在城市名与详细

    //获取ip和地理信息 string url = "http://pv.sohu.com/cityjson"; WebRequest wRequest = WebRequest.C ...