jQuery基础第一天（jQuery使用和选择器）

jQuery：

简单易用，功能强大，对移动端来说，体积稍大。

1、回顾前面学到的js我们遇到的一些痛点

1.window.onload 事件有个事件覆盖的问题，我们只能写一个
2.代码容错性差
3.浏览器兼容性问题
4.书写很繁琐，代码量多
5.代码很乱，各个页面到处都是
6.动画效果，我们很难实现

2、jQuery解决问题

解决了我们上面遇到所有问题

3、jQuery的基本使用


min：它是压缩过的版本

区别：我们开发过程中，会用未压缩的版本，或者压缩的。
项目上线的时候，我们要用压缩过的版本。

版本问题：
-1.1.xxx 版本 jQuery-1.11.1.js
-2.2.xxx 版本 不再支持IE6、7、8

1/引包

1.要把我们的jQuery源文件拿到我们的项目里面来
2.在我们的页面中引用jQuery文件



问题：

如果遇到这种问题，那肯定是没有引用我们的jQuery源文件。
用jQuery之前，先引入jQuery，然后，再去写我们的jQuery代码。

2/入口函数

$(document).ready(function(){});
$(function(){});

3/事件处理程序

1.事件源：

Js方式：document.getElementById(“id”)
jQuery方式：$(“#id”)

2.事件：

Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click

区别：jQuery的事件不带on

3.事件处理程序

Js 书写方式:
document.getElementById(“id”).onclick = function(){
    // 语句
}
jQuery 书写方式: 
$(“#id”).click(function(){
    // 语句
});

4、jQuery详细介绍

1/$问题

a)Js命名归法：下划线、字母、$、数字
b)但是不能以数字作为开头

var $ = “我是$符号”;

jQUery的两个变量：$ 和 jQuery
jQuery占用了我们两个变量：$ 和 jQuery

2/js入口函数跟jQuery入口函数的区别：

1.Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行
2.jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。

5、Js创建对象

三种方式：

1.var obj = {};
2.var obj1 = new Object();
3.var obj2 = Object.create();

1跟2的区别：
推荐使用第一个方式
第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。

6、jQuery基本选择器

1/回顾CSS选择器

2/jQuery基本选择器

规律：$(selector).css(“background”,”red”);

7、jQuery是什么

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

1/Javascipt跟jQuery的区别：

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

8、jQuery其他选择器

1/层级选择器

** 层级选择器选择了选择符 后面那个元素，比如，div > p，是选择>后面的p元素。**

2/过滤选择器

3/筛选选择器

参考:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // .eq()
            // 类比 ":eq(index)" 选择器
            //$("span").eq(1).css("font-size","40px");

            // .first()
            // 类比 ":first" 选择器
            //$("span").first().css("font-size", "40px");

            // .parent()
            // 选择父亲元素
            //$("#sp").parent().css("background", "gold");

            //$("p").parent("#div").css("background", "gold");

            // .siblings()
            // 选择所有的兄弟元素
            //$("#li04").siblings(".liItem").css("background", "gold");

            // .find()
            // 查找所有后代元素
            $("div").find("#li04").css("background", "gold");
        });
    </script>
</head>
<body>
<div>
    <span>我是第1个span</span>
    <span id="sp">我是第2个span</span>
    <span>我是第3个span</span>
</div>

<div id="div">
    <p>Hello</p>
</div>
<div class="selected">
    <p>Hello Again</p>
</div>

<div>
    <ul>
        <li>我是li01</li>
        <li>我是li02</li>
        <li>我是li03</li>
        <li id="li04">我是li04</li>
        <li>我是li05</li>
        <li class="liItem">我是li06</li>
        <li>我是li07</li>
        <li>我是li08</li>
    </ul>
</div>
</body>
</html>

案例：下拉菜单

下拉菜单.gif
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            background-image: url(imgs/bg.jpg);
            padding-left: 10px;
        }

        .wrap li {
            float: left;
            width: 100px;
            height: 30px;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            color: black;
            text-decoration: none;
            display: block;
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-image: url(imgs/libg.jpg);
        }

        .wrap li ul {
            position: absolute;
            display: none;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // mouseenter事件 是 鼠标经过时触发的事件
            /*$(".wrap li").mouseenter(function () {
                $(this).children("ul").show();
            });

            $(".wrap li").mouseleave(function () {
                $(this).children("ul").hide();
            });*/

            /*$(".wrap li").hover(function () {
                //alert("1");
                $(this).children("ul").show();
            }, function () {
                $(this).children("ul").hide();
            });*/

            /*$(".wrap li").hover(function () {
                /!*alert("1");*!/
                var $this = $(this).children("ul");
                var isShow = $this.css("display");
                if(isShow === "block") {
                    $this.hide();
                } else {
                    $this.show();
                }
            });*/

            $(".wrap li").hover(function () {
                $(this).children("ul").slideToggle();
            });

        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li><li>
            <a href="#">一级菜单1</a>
            <ul>
                <li><a href="#">二级菜单1</a></li>
                <li><a href="#">二级菜单2</a></li>
                <li><a href="#">二级菜单3</a></li>
            </ul>
        </li>
        </ul>
    </div>
</body>
</html>

此案例获取方式：
链接：http://pan.baidu.com/s/1gfgFPFd 密码：4tl0

9、mouseover事件跟mouseenter事件的区别：

mouseover/mouseout事件，鼠标经过的时候会触发多次，每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件，鼠标经过的时候只会触发一次

10、DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象:
方式一：$(“#btn”)[0]
方式二：$(“#btn”).get(0)

DOM对象转换成jQuery对象：
$(document) -> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“bt n”);
btn -> $(btn);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 200px;
            background: #000;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // DOM对象转换成jQuery对象
            /*var btn = document.getElementById("btn");
            $(btn).click(function () {
                $("div").hide();
            });*/

            // jQuery对象转换成DOM对象
            /*$("button")[1].onclick = function (){
                alert("jQuery对象转换成dom对象");
            };*/

            // 另外一个方式
            $("button").get(0).onclick = function () {
                alert("jQuery对象转换成dom对象");
            }

            // js里面的click() 方法：触发click事件
            // js里面的onclick 是绑定点击事件
            /*var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("我是btn的onclick");
            };
            btn.click();*/
        });
    </script>
</head>
<body>
    <button id="btn">我是按钮</button>
    <button>我是按钮</button>
    <div>

    </div>
</body>
</html>

今日重点回顾：

jQuery是什么？

它是JS的一个库，封装一些我们常用的功能，方便我们去调用，提高我们的开发效率。

jQuery基本使用：
  1. 引包
  2. 两种方式：
    a).$(document).ready.(function(){});
    b).$(function(){});
    3.使用：
    a).获取事件源
    b).事件
    c).事件处理程序
jQuery选择器

基本选择器：、element、、,
层级选择器：空格、>、+、~
过滤选择器：
基本过滤选择器 :eq(index)、 :lt(index) 、:first、:last、:even、:odd
属性选择器：[attr]、 [attr = value]、[attr! = value]、[attr^ = value]、[attr$= value]、[attr = value]、[attr][attr1]

筛选选择器：.eq(index)、.parent()、.children()、siblings()、.last()、.first()、.find()

DOM对象跟jQuery对象的相互转换:

DOM –>jQuery 对象： $(document) 、$(this)
jQuery - >DOM对象：$(“div”)[0]、$(“div”).get(0)
$(“div”).show(1000).html(“我是文本内容”);
链式编程

区别：
//.eq(index)获取到的是jQuery对象
//.get(index)获取到的是DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            //.eq(index)获取到的是jQuery对象
            //.get(index)获取到的是DOM对象

            $("div").eq(0).css({
                //这里面的键值对 ， 键 可以带双引号或者单引号，也可以不带引号
                //一些不合法的变量名字，可以使用加引号的方式来声明
                "font-size":"40px"
            });

           var $div = $("div").eq(0);
            console.log($div);

            //获取的是DOM
            //下面这句是错误的，因为.get（index）方法获取的是DOM对象，而DOM对象没有CSS这个方法
            //$("div").get(1).css("font-size","40px");
            var divDom = $("div").get(0);
            console.log(divDom);
        });
    </script>

</head>
<body>
<div>
    我是div1
</div>
<div>我是div2</div>
<div></div>

</body>
</html>

jQuery的帮助文件及文档获取：

链接：http://pan.baidu.com/s/1hrVO3WC 密码：zy08

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 162,158评论 4赞 370
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 68,600评论 1赞 307
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 111,785评论 0赞 254
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,655评论 0赞 220
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 53,075评论 3赞 295
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 41,002评论 1赞 225
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 32,146评论 2赞 318
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,918评论 0赞 211
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,671评论 1赞 250
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,838评论 2赞 254
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,318评论 1赞 265
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,636评论 3赞 263
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,343评论 3赞 244
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,187评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,982评论 0赞 201
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 36,126评论 2赞 285
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,934评论 2赞 279

推荐阅读更多精彩内容

  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,286评论 0赞 44
  • jQuery基础——样式篇
    第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,542评论 0赞 11
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,288评论 0赞 2
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,101评论 0赞 1
  • jQuery基础入门
    jQuery基础（一）——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,048评论 0赞 8