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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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