美文网首页我爱编程技术干货
初试HTML之JQuery(菜鸟学习篇)

初试HTML之JQuery(菜鸟学习篇)

作者: 二爷不太冷 | 来源:发表于2016-11-14 18:48 被阅读0次

前言:

HTML的学习进度逐渐加快,JS和JQuery的学习初步结束。总结了一些前辈指导和书籍上的资料。本篇文章仍会不断更新。


W3School jQuery 参考手册


一、回顾JS(JavaScript)当前遇到的痛点

1.Window.Onload时间有个时间覆盖的问题,只能写一个。

2.代码容错性差

3.浏览器的兼容器差

4.书写很繁琐,代码量多

5.代码很乱,各个页面到处都是

6.动画效果,很难实现。

二、JQuery解决当前问题

min:它是压缩过的版本

区别:我们在开发过程中,会使用未压缩或者是压缩的版本。项目上线的时候,我们一定使用压缩过的版本。

1.1XXX版本  query-1.11.1.js

1.2   2.2XXX版本   不再支持 IE6,7,8

2.引包

要把我们的JQuery源文件

在我们的页面中引入我们的JQuery的文件

问题:

如果遇到这种问题,那肯定是没有引用我们的JQuery的源文件,在去写JQuery的源代码。

事件处理程序

事件源

Js方式:document.getElementById(“id”)

jQuery方式:$(“#id”)

事件

Js方式:document.getElementById(“id”).onclick

jQuery方式: $(“#id”).click

区别:jQuery的事件不带on

l事件处理程序

Js书写方式:

document.getElementById(“id”).onclick  = function(){

//语句

}

jQuery书写方式:

$(“#id”).click(function(){//语句

});

jQuery详细介绍

$问题

a)Js命名归法:下划线、字母、$、数字

b)但是不能以数字作为开头

var $

= “我是$符号”;

jQUery的两个变量:$和jQuery

jQuery占用了我们两个变量:$和jQuery

js入口函数跟jQuery入口函数的区别:

1.Js的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行

2.jQuery的入口函数是在html所有标签都加载之后,就回去执行。

Js创建对象

三种方式:

1.var  obj = {};

2.var  obj1 = new Object();

3.var  obj2 = Object.create();

1跟2的区别:

推荐使用第一个方式

第二种方式存在效率问题,因为要new对象,会涉及到原型查找的问题。


jQuery基本选择器

回顾CSS选择器


jQuery基本选择器

规律:$(selector).css(“background”,”red”);

jQuery是什么

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

Javascipt跟jQuery的区别:

Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。

jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发

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

jQuery其他选择器

层级选择器 过滤选择器 属性选择器

mouseover事件跟mouseenter事件的区别:

mouseover/mouseout事件,鼠标经过的时候会触发多次,每遇到一个子元素就会触发一次。

mouseenter/mouseleave事件,鼠标经过的时候只会触发一次

DOM对象跟jQuery对象相互转换

jQuery对象转换成DOM对象:

方式一:$(“#btn”)[0]

方式二:$(“#btn”).get(0)

DOM对象转换成jQuery对象:

$(document)->把DOM对象转成了jQuery对象

var btn = document.getElementById(“bt n”);

btn->$(btn);

相关文章

  • 初试HTML之JQuery(菜鸟学习篇)

    前言: HTML的学习进度逐渐加快,JS和JQuery的学习初步结束。总结了一些前辈指导和书籍上的资料。本篇文章仍...

  • jQuery 学习

    转载:菜鸟教程[https://www.runoob.com/jquery/jquery-intro.html] ...

  • JQuery常用语句整理(二)

    参考资料:菜鸟教程JQuery HTML===JQuery除了可以对HTML内容进行修改之外,还能进行添加删除。 ...

  • JQuery 干货篇之选择元素

    JQuery 干货篇之选择元素 实验的HTML+CSS的代码 html css 选择器 :animated :选择...

  • jQuery基础

    该文章为菜鸟教程jQuery精华知识点摘录,如要学习详细案例知识,请移步菜鸟教程 jQuery选择器: 实例 知识...

  • jQuery HTML操作学习篇

    学习资料 w3cschool 1.获取、设置元素的内容 1.1获取或设置目标元素的文本内容 语法 $(select...

  • jQuery学习02

    此篇是续上一篇的jQuery01之后的继续学习。 三、jQuery之——属性选择器 jQuery除了支持css的所...

  • 【JavaScript】解决IE8下,用js不能选择class的

    HTML代码 JavaScript代码 JavaScript & jQuery总目录:jQuery目录 上一篇:【...

  • jQuery 添加和删除HTML元素

    本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。 jQuery 中用于添加 HTML 元...

  • jQuery 添加和删除HTML元素

    本节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。 jQuery 中用于添加 HTML 元...

网友评论

    本文标题:初试HTML之JQuery(菜鸟学习篇)

    本文链接:https://www.haomeiwen.com/subject/omlmuttx.html