jQuery学习(第一天)

js的回顾

  • 遇到的问题

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

jQuery的基本使用

jQuery学习(第一天)
image.png

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

  • 引包

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


jQuery学习(第一天)
image.png

问题:


jQuery学习(第一天)
image.png

如果遇到这种问题,那肯定是没有引用我们的jQuery源文件。
用jQuery之前,先引入jQuery,然后,再去写我们的jQuery代码。
  • 入口函数的书写方式(两种)
$(document).ready(function(){

});
$(function(){

});
jQuery学习(第一天)
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选择器
jQuery学习(第一天)
image.png

jQuery学习(第一天)
image.png
  • jquery选择器
jQuery学习(第一天)
image.png

jQuery学习(第一天)
image.png
  • 规律:$(selector).css(“background”,”red”);
    Console.log();在控制台(网页)打印
  • 具体实现

jQuery学习(第一天)
image.png

jQuery学习(第一天)
image.png

jQuery学习(第一天)
image.png

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

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

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

jQuery学习(第一天)
image.png

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

jQuery其他选择器
  • 层级选择器
jQuery学习(第一天)
image.png

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

  • 过滤选择器
    • 基本选择器
jQuery学习(第一天)
image.png

jQuery学习(第一天)
image.png
  • 属性选择器
jQuery学习(第一天)
image.png

jQuery学习(第一天)
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>

实例


jQuery学习(第一天)
image.png

jQuery学习(第一天)
image.png
上一篇:WINDOWS 性能计数器


下一篇:脚本中调用别的脚本,如何得到执行结果?