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. 动态规划----最长递增子序列问题(LIS)

    题目: 输出最长递增子序列的长度,如输入 4 2 3 1 5 6,输出 4 (因为 2 3 5 6组成了最长递增子序列). 暴力破解法:这种方法很简单,两层for循环搞定,时间复杂度是O(N2). 动 ...

  2. 分享13道上海尚学堂拿回来的Java面试真题，这些都是Java核心常见问题，想拿OFFER必看！

    上海尚学堂Java培训学员参加面试带回来的真题,分享出来与大家,希望大家能认真地看看做一遍.后面有详细题解答案,对照下,看看自己做得怎么样,把这些面试遇到的真题全部掌握,做好面试笔试前的准备. 一.1 ...

  3. [Swift]LeetCode23. 合并K个排序链表 | Merge k Sorted Lists

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  4. [Swift]LeetCode47. 全排列 II | Permutations II

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  5. [Swift]LeetCode824. 山羊拉丁文 | Goat Latin

    A sentence S is given, composed of words separated by spaces. Each word consists of lowercase and up ...

  6. [Swift]LeetCode891. 子序列宽度之和 | Sum of Subsequence Widths

    Given an array of integers A, consider all non-empty subsequences of A. For any sequence S, let the  ...

  7. [Swift]LeetCode985. 查询后的偶数和 | Sum of Even Numbers After Queries

    We have an array A of integers, and an array queries of queries. For the i-th query val = queries[i] ...

  8. [Swift]LeetCode1027. 最长等差数列 | Longest Arithmetic Sequence

    Given an array A of integers, return the length of the longest arithmetic subsequence in A. Recall t ...

  9. Kubernetes 笔记 07 豌豆荚之旅（二）

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...

  10. 第一次c语言上机

    实验结论 part1: 第一部分的内容是按照书上所给的例题,进行简单的验证.虽然听起来很简单,但是由于之前并未接触过这方面的内容,还是犯了很多微小的错误.主要是在进行编程语言的输入时会输错字母,会忘记 ...