初识jQuery 基础篇借鉴版

首先提供一个知识点外资源：

在线编程：无需编程环境：

　　https://codepen.io/pen

　　添加jQuery库：

　　　　Settings-->JavaScript-->quick-add-->jQuery

jQuery：

基于js研发的封装库：可以屏蔽之前书写js代码考虑浏览器兼容性的问题。问题交给框架的编写者

企业生成环境经常使用js库jQuery是以后学习其他封装的基础库，99%企业都在使用jQuery

高级库：

　　Bootstrap（http://www.bootcss.com/p/layoutit/ 可视化布局），zepto，YUI，easyUI，jQuery UI，Ext js（非常笨重，页面效果非常华丽，适合局域网）

　　Vue

　　Angular

　　React

jQuery：

　　所有高级库的基础

　　高于js ，但又低于其他高级库

　　万事万物皆方法（将js属性功能封装为方法）

　　设计思想：写最少的代码，做最好的事情

　　　　　　Write less，do more

搭建jQuery开发环境：

　　引用jQuery库

jQuery能做什么?

　　1.Js能做的都可以做

　　2.访问和操作DOM元素

　　3.控制页面样式

　　4.对页面事件进行处理

　　5.扩展新的jQuery插件

　　6.与Ajax技术完美结合

优势：

　　1.体积小

　　2.强大的选择器：精确定位（重点）

　　3.出色的DOM封装

　　4.可靠的事件处理机制

　　5.浏览器兼容

　　6.隐式迭代简化编程

　　7.丰富的插件支持

装载的先后次序:

　　jQuery封装库在上

　　Js代码在下

语法结构：

$(document).ready()=function(){};

$(function(){});

注：$(function(){})执行顺序在window.onload之前

语法结构：

1. 工厂函数$():将DOM对象转化为jQuery对象、$(selector).action();

2. 选择器selector：选择器

方法：

　　1. $(selector).addClass（）

　　　　A. 向被选元素添加一个或多个类样式

　　　　B. 可以是一个，也可以是多个

　　2. $(this)

　　　　A. 是一个jQuery对象

　　　　B. 指向鼠标指针当前移向的一菜单级

　　　　C. 代表当前

　　3. $(selector).css()

　　　　A. css(“属性”，”属性值”)；//设置一个css属性

　　　　B. css({“属性1”:”属性值1”,属性2””:”属性值2”......});//同时设置多个css属性

　　4. $(selector).children（）

　　　　A. jQuery中遍历后代的一种方法

　　　　B. 用作查找元素的所有直接子元素

　　5. $(selector).show（）

　　　　显示元素

　　6. $(selector).hide()

　　　　隐藏元素

论css()方法与addClass方法的区别：

　　A. css()方法为所匹配的元素设置给定的css样式

　　B. addClass()方法向所匹配的元素添加一个或多个类，改方法不会删除已经存在的类，仅在原有基础上追加新的类样式

　　C. 基于结构与样式分离的原则，通常在实际应用中，为谋元素添加样式，使用addClass（）方法比css（）方法的频率高很多，因此建议使用addClass（）方法为元素添加样式

jQuery程序的代码风格

　　1. ”$”的使用

　　　　A. jQuery程序的标志

　　　　B. $==jQuery

　　　　C. 无论页面元素的选择器，还是功能函数的前缀，都必须使用改符号

　　2. 链式操作

　　　　A. 在对DOM元素进行多个操作时。为避免过度使用临时变量或不必要重复代码

　　　　B. 链式编程：可以对一个对象进行多重操作，将操作结果返回给该对象

　　　　C. 栗子：光棒效果

HTML：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript" src="Day01.js"></script>
<body><ul><li>北京</li><li>上海</li><li>西雅图</li></ul>
</body>
</html>

jQuery：

$(function () {$("li").mouseover(function () {$(this).css("background-color","pink");}).mouseout(function () {$(this).css("background-color","");});
});

3. 隐式迭代

　　$(“li”)：一行代码即可获取页面所有的li标签，可以为其所有li表示绑定事件或设置样式等

4. 添加注释

　　A. 开发阶段：

　　　　a) 为代码添加注释，可以增加代码的可读性

　　　　b) 能够让别人很容易地读懂你的代码

　　　　c) 便于后期维护

　　B. 维护阶段：

　　　　a) 建议把关键的模块形成开发文档

　　　　b) 便于后期维护，即便后期删除代码注释，也不影响后期维护

　　C. 产品正式发布：

　　　　a) 建议删除注释

　　　　b) 减少文件大小，加快下载速度

　　　　c) 提高用户体验

DOM对象与jQuery对象：

一. DOM对象

　　1. 文档对象模型（Document Object Model）

　　2. 每个HTML页面都有一个DOM，每个DOM都可以表示一棵树

简要图：

论DOM拿文本值：

1. inner HTML：拿到的是标签与文本值

2. inner Text：拿到的是金文本值

3. Value：表单元素的value值

二.jQuery对象

　　jQuery对象就是通过jQuery包装DOM对象后产生的对象，就能够使用jQuery中的方法

　　栗子：

$(“#box”).html();
//获取id为box元素内的html代码

jQuery不可使用DOM对象一系列方法，它有自己的资源

论jQuery拿文本值：

4. html()：拿到的是标签与文本值

5. text()：拿到的是金文本值

6. val()：表单元素的value值

三．互转

DOM：土鳖

jQuery：土豪

1. DOM-->jQuery（土鳖变土豪）拿钱砸：$

Var txtName = document.getElementById(“txtName”);

Var $txtName = $(txtName);

2. jQuery-->DOM（土豪变土鳖）分解

Var $div = $(“#box”);

Var div = $div[0];

操作样式：

1. dom:三种

(1) Dom.style.fontSize=”属性值”；

(2) Dom.className = “class属性值”;

(3) Dom.style.cssText=”A:B;C:D”;

2. jQuery：三种

(1) Jquery.css(“属性”，”属性值”)；

(2) Jquery.css({“属性1”:”属性值1”,属性2””:”属性值2”......})；

(3) jQuery.addClass(“类的属性值”);

事件注册：

1. dom: 有 on前缀

Dom中所有事件的开始都是有on的

栗子：

Dom.οnclick=function(){};

2. jQuery: 无on前缀

直接上栗子：

jQuery.click(function(){});

经典栗子：使用jQuery变换网页效果:

Html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<script type="text/javascript" src="../../../../../jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<body>
<h1>你是人家的四月天</h1>
<div><p> 笑响亮了四面风</p><p> 轻灵在春的光艳中交舞看变</p><p>你是一月早天的云烟</p><p>黄昏吹着风的软</p><p>....</p><p><a href="#">查看全部</a></p>
</div>
<hr/>
<div>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞"系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢她的男人，脑子有问题。”她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。她，就是那个万千宠爱于一身的一代才女——林徽因。《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤
</div>
</body>
</html>

jQuery：

$(function () {var $div = $("div:last");var $a = $("a");$div.hide();$a.click(function () {if ($a.text() == "查看全部") {$div.show();$a.text("折叠");}else {$div.hide();$a.text("查看全部");}});
});

转载于:https://www.cnblogs.com/baobaoa/p/8869773.html

初识jQuery 基础篇借鉴版相关推荐

尚硅谷docker基础篇 2018版
typora-root-url: ./image Docker基础篇之快速上手第一章 Docker简介是什么? 问题:为什么会有 docker 的出现一款产品从开发到上线,从操作系统,到运行环境 ...
前端开发学习路径之阶段四：jQuery基础篇
jQuery基础总共分为四个部分,分别是样式篇.事件篇.动画篇.DOM篇. 一.样式篇 1.jQuery选择器 1.1.1 jQuery选择器之id选择器 id选择器:一个用来查找的ID,即元素的id ...
sketch制作Android动画,Sketch制作GIF动画——基础篇(改良版)
前言其实这个教程是我在原版教程的基础上经过一些实验后从新得出的更完善的方法,在此为各位补足遗漏的部分以及一些改良后的效果,希望大家喜欢之余,为我点个赞,感谢:pray: 使用sketch不仅能够制作 ...
前端框架——Jquery——基础篇2__获取DOM节点的值
对于获取DOM节点的内容,Jquery提供了四种方法,html,text,val,attr.下面来分别介绍这四种方法和它们的区别.下面以例子来说明我写的JSP页面内容如下: 1 <div id ...
前端框架——Jquery——基础篇7__工具函数(Utils)
在我们实际的开发过程中,工具函数可以说是的用的最多的,知识虽然不难,但是用起来却有技巧性,这就是Jquery学起来的难点.这里介绍用Jquery处理最常见的三种对象,字符串,数组和表单操作,之后的话会 ...
鸟哥Linux私房菜_基础篇(第二版)_第七章学习笔记
第七章 Linux文件和目录管理绝对路径:以"/"开始相对路径:以非"/"开始其中,"."代表当前目录,".."代 ...
鸟哥Linux私房菜_基础篇(第二版)_第十章学习笔记
第十章 vi文字处理器编辑器 vi 1.一般模式 2.编辑模式 3.命令行模式注意:在vi编辑模式中 Tab键与空格键的不同向上(k) 向下(j) 向左(h) 向右(l) ctrl+f ...
谷粒商城分布式基础篇1-个人版
基础篇 1 项目简介 1.1 项目背景 1.2 电商模式市面上有5种常见的电商模式 B2B.B2C.C2B.C2C.O2O 1.2.1 B2B 模式 B2B(Business to Business ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...

初识jQuery 基础篇借鉴版

初识jQuery 基础篇借鉴版相关推荐

最新文章

热门文章

初识jQuery 基础篇 借鉴版

初识jQuery 基础篇 借鉴版相关推荐

最新文章

热门文章

初识jQuery 基础篇借鉴版

初识jQuery 基础篇借鉴版相关推荐