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

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 2,974评论 0 44
  • 第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,365评论 0 11
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,142评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 919评论 0 1
  • jQuery基础(一)——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 932评论 0 9
  • 在夕阳的余晖里,我遇到了他。 他背着破旧的脏兮兮的旅行包,身上布满了灰尘,在众多的游者里显得格格不入,所以我一眼...
    非晚兮阅读 167评论 0 0
  • 冷空气过后, 气温骤降, 感觉一夜入冬, 这个时候, 突然很怀念 牛肉面。 牛肉面, 又叫兰州拉面, 它不是简单的...
    听瑛语阅读 152评论 0 0
  • 建业老师的正能量表现在用心做教育, 建业老师的责任心表现在爱心做教育。 建业老师的爱笑表现在快乐成长教育。 家长的...
    小灰灰虫虫阅读 286评论 0 0
  • 旧折痕 文/安小安 八月收起的伞 撑起了九月的落叶 又是这样一个萧肃的秋节 ...
    安小安zzz阅读 517评论 8 23