jQuery学习(第一天)-阿里云开发者社区

开发者社区> lambdaλ> 正文

jQuery学习(第一天)

简介: js的回顾 遇到的问题 1.window.onload只能使用一个(事件覆盖问题) 2.代码的容错性不强 3.浏览器兼容性问题 4.代码量较多,书写很繁琐 5.代码很乱到处都是 6.动画效果我们很难实现 jQuery的基本使用 image.png min:它是压缩过的版本 区别:我们开发过程中,会用未压缩的版本,或者压缩的。
+关注继续查看

js的回顾

  • 遇到的问题

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

jQuery的基本使用

img_623f97383378b07c6d7bf3ce71dcfa86.png
image.png

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

  • 引包

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


img_5e172e2a870ac3848909125bd0de0973.png
image.png

问题:


img_5cb806dd211c984cbd379b6e7da2d99a.png
image.png

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

});
$(function(){

});
img_f45e8d84abf7a35a9dbac2a303f13e04.png
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选择器
img_454bab54f9354392ca33d5cc49922f14.png
image.png

img_15a26e9af7fec11c50e67e20f5727f98.png
image.png
  • jquery选择器
img_e64b95417ce8088f619dcd90f7f0d2a7.png
image.png

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

img_205f96849d5fc28680897adb3e045344.png
image.png

img_ef1dcd3f6f58df43db4971be7d5ae010.png
image.png

img_6650254738bcd66c9883aaaf9554aed6.png
image.png

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

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

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

img_5905b3093dcfcedc60f97a1dde39ef53.png
image.png

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

jQuery其他选择器
  • 层级选择器
img_467091acd1d86ea9ea93a1b678022f33.png
image.png

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

  • 过滤选择器
    • 基本选择器
img_0c43946645c364a20952bbdbe4139460.png
image.png

img_cd5cd2442b349ad05137fcd8263d7b74.png
image.png
  • 属性选择器
img_76329abf87dd20e9aa96a26c802862b5.png
image.png

img_3f02f661d69d074d6762c487c87c2b33.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>

实例


img_54a248b32e3f23ddd4eeff1fd5aaf0b2.png
image.png

img_2c88dbcfdd232ef4189ab36e30c6f1ff.png
image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Redis学习第一天
此文章为个人学习时的总结,仅供参考,不足之处望指出。
585 0
jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作、事件绑定(2) ————————————————————学习目录———————————————————————— 4.DOM操作 5.事件绑定 源码地址: https://github.com/iyun/jQueryDemo.git ————————————————————学习目录———————————————————————
1403 0
21天Java 打卡学习计划——第一天
众里寻他千某度,Alibaba Java 技术图谱,真香!
205 0
我的第一个页面及其标签简介|学习笔记
快速学习我的第一个页面及其标签简介
35 0
jQuery学习笔记之插件开发(4)
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强。 1.插件的种类(3种):局部、全局、选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用的功能定义为函数,然后绑定到jQuery对象上,从而成为jQuery对象的一个扩展方法。 目前,大部分jQuery插件都是这种类型的插件,由于这种插件是
1363 0
jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ——————————————————————学习目录———————————————————— 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuery的Ajax ———————————————————————————————————————————————— 前言:当前流行的JavaScript库有:
1308 0
87
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载