jQuery学习(第一天)

js的回顾

• 遇到的问题

1.window.onload只能使用一个(事件覆盖问题)
2.代码的容错性不强
3.浏览器兼容性问题
4.代码量较多,书写很繁琐
5.代码很乱到处都是
6.动画效果我们很难实现

jQuery的基本使用

image.png

min：它是压缩过的版本
区别：我们开发过程中，会用未压缩的版本，或者压缩的。
项目上线的时候，我们要用压缩过的版本。
版本问题：
1.1.xxx 版本 jQuery-1.11.1.js
2.2.xxx 版本 不再支持IE6、7、8

• 引包

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

image.png

问题：

image.png

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

• 入口函数的书写方式(两种)

$(document).ready(function(){

});
$(function(){

});

2018-01-08 17-16-29 的屏幕截图.png

• 事件处理程序

1. 事件源
   js:document.getElementById("id");
   jq:$("#id")

2.事件
js:document.getElementById("id").onclick = function(){//语句}
jq:$("#id").click(function(){//语句})

区别:
jQuery事件不带on

• 简单的练习
  • 使显示的div框隐藏起来

//引包
<script src="js/jquery.js"></script>
//给定格式
<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 200px;
            background: #000000;
            margin-bottom: 10px;
            /*display: none;*/
        }
    </style>
//具体函数代码
   <script>
        //入口函数
        $(document).ready(function () {
            //语句
            $("#click").click(function () {
                $("div").hide();
            });
        });
    </script>
.
.
.
//页面主体(body)
<input type="button" value="我是按钮" id="click" />
<div></div>

JQuery详细介绍

• $的问题

js命名规则:
a)Js命名归法：下划线、字母、$、数字
b)但是不能以数字作为开头
var $ = “我是$符号”;
jQUery的两个变量：$ 和 jQuery
jQuery占用了我们两个变量：$ 和 jQuery

• js入口函数与jQuery入口函数的区别

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

js创建对象

• 三种方式
  • var obj = {}
  • var obj1 = new Object();
  • var obj2 = Object.create();

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

jquery选择器

• 回顾css选择器

image.png

image.png

• jquery选择器

image.png

image.png

• 规律：$(selector).css(“background”,”red”);
  Console.log();在控制台(网页)打印
• 具体实现

image.png

image.png

image.png

设置多个样式为$("#...").css({...});
根据自己的意愿设置的时候 函数内的参数为形参（可自定义）
设置某一个时需要进行相应的判断

jQuery是什么

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

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

image.png

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

jQuery其他选择器

• 层级选择器

image.png

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

• 过滤选择器
  • 基本选择器

image.png

image.png

• 属性选择器

image.png

image.png

mouseover/mouseout事件跟mouseenter/mouseleave事件的区别

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

dom对象与jQuery对象之间的相互转换

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

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

鼠标事件的几种方法

 <script>
        $(document).ready(function () {
//第一种
            // mouseenter事件 是 鼠标经过时触发的事件
            /*$(".wrap li").mouseenter(function () {
             $(this).children("ul").show();
             });
             $(".wrap li").mouseleave(function () {
             $(this).children("ul").hide();
             });*/
//第二种 hover 传两个参数
            /*$(".wrap li").hover(function () {
             //alert("1");
             $(this).children("ul").show();
             }, function () {
             $(this).children("ul").hide();
             });*/
//第三种 hover 传一个参数 进行必要的判断
            /*$(".wrap li").hover(function () {
             /!*alert("1");*!/
             var $this = $(this).children("ul");
             var isShow = $this.css("display");
             if(isShow === "block") {
             $this.hide();
             } else {
             $this.show();
             }
             });*/
//第四种 hover 传一个参数 （给一个‘slideToggle’ 切换 的效果）
            $(".wrap li").hover(function () {
                $(this).children("ul").slideToggle();
            });
        });
    </script>

实例

image.png

image.png