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

前言:

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);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,703评论 2 17
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,630评论 18 503
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,342评论 0 44
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,746评论 0 8
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,082评论 2 19