jQuery网页开发案例:jQuery 概述及jQuery 的基本使用
jQuery 概述
JavaScript 库
仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
常见的JavaScript 库
jQuery Prototype YUI Dojo ExtJs 移动端的zepto
这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。
1.2 jQuery 的概念
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质: 就是学习调用这些函数(方法)。
jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
jQuery跟原生JavaScript对比
jQuery 的优点
轻量级。核心文件才几十kb,不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持,大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
免费、开源
jQuery 的基本使用
jQuery 的下载
官网地址:jQuery
版本:
1x :兼容 IE 678 等低版本浏览器, 官网不再更新
2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本
前面的压缩的,后面是不压缩的。开发中一般用压缩的
jQuery 的使用步骤
1. 引入 jQuery 文件
2. 使用即可
引入成功
jQuery 的入口函数
如果写在上面,就会失效,因此我们要写个入口函数,类似于等着页面的DOM加载完毕再去执行js代码
$(function () { ... // 此处是页面 DOM 加载完成的入口}) ;
$(document).ready(function(){... // 此处是页面DOM加载完成的入口
});
1.等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
2.相当于原生 js 中的 DOMContentLoaded。
3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
4.更推荐使用第一种方式。
jQuery 的顶级对象 $
1.$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。
// 1. $ 是jQuery的别称(另外的名字)jQuery(function(){// alert('1111')jQuery('div').hide();// $('div').hide();// 同样的效果})// 2. $同时也是jQuery的 顶级对象
jQuery 对象和 DOM 对象
1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
<script>// 1. DOM 对象: 用原生js获取过来的对象就是DOM对象var myDiv = document.querySelector('div'); // myDiv 是DOM对象var mySpan = document.querySelector('span'); // mySpan 是DOM对象console.dir(myDiv);// 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装$('div'); // $('div')是一个jQuery 对象$('span'); // $('span')是一个jQuery 对象console.dir($('div'));// 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法// myDiv.style.display = 'none';// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法</script>
注意:
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。
DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1. DOM 对象转换为 jQuery 对象: $(DOM对象)
$('div')
原生js转换jQuery对象不要加“”号,因为它本身就是dom对象了
原生js的方法比较多,但是jQuery对象中没有这个方法,因此要转换为dom对象
2. jQuery 对象转换为 DOM 对象(两种方式)
$('div') [index] index 是索引号
$('div') .get(index) index 是索引号
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script>
</head><body><video src="mov.mp4" muted></video><script>// 1. DOM对象转换为 jQuery对象// (1) 我们直接获取视频,得到就是jQuery对象$('video')// (2) 我们已经使用原生js 获取过来 DOM对象var myvideo=document.querySelector('video');$(myvideo)// $(myvideo).play(); jquery里面没有play 这个方法// 2. jQuery对象转换为DOM对象// myvideo.play();$(myvideo)[0].play();$('video').get(0).play();console.log($(myvideo))</script>
</body></html>
jQuery网页开发案例:jQuery 概述及jQuery 的基本使用相关推荐
- JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...
- jQuery前端开发学习指南(18)——利用jQuery实现元素的隐藏、显示和切换及其动画效果
版权声明 本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl 概述 在jQuery框架中可便捷地以动画形式隐藏和显示以及切换元素,常用方式有如下三种:默认方 ...
- 前端网页开发实例入门
网页实例 1.使用jQuery提高开发效率 1)什么是jQuery jQuery 是一个 JavaScript 库,是一个"写的更少,但做的更多"的轻量级 JavaScript 库 ...
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个 员工管理源代码分享 在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三 角色管理源码分享 在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享 在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了 ...
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之二 用户管理源码分享
在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了使用Jquery EasyUI来进行开发的相关方法,同时对入群的用户提供了使用J ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- JQuery 入门 - 附案例代码
文章目录 预备知识与后续知识及项目案例 为什么要学jquery 体验jquery的使用 jquery到底是什么 jquery的版本问题 jquery的入口函数 jq对象和dom对象(重要) jquer ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)
转载:http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html 20 ...
最新文章
- 幸运数字Ⅱ(树型结构构造答案,打表)难度⭐⭐
- SD-WAN — 核心能力
- shell入门基础必备
- CSS教程:li和ul标签用法举例
- 线程池 ManualResetEvent
- JDK1.5中的线程池(java.util.concurrent.ThreadPoolExecutor
- 爬虫基于ADSL动态获取ip
- PAT:1032. Sharing (25) AC
- jsp 访问mysql数据库_如何使用JSP访问MySQL数据库
- java第二天学习笔记
- 版本管理工具git的使用总结
- [样本分析] 海莲花CS样本
- 视频网关是什么,视频接入网关技术作用
- Rust的crate
- 腹有诗书气自华——记环宇通软CEO骆永华 1
- 记2017第八届蓝桥杯决赛(国赛)—北京三日游
- Swift 版本很好的卡片切换效果基于ZLSwipeableView(类似于[陌陌点点][探探])
- python anaconda下载包_Anaconda下载 10.0.15063.0
- 映射表类(CMap)
- 触摸控件与显示控件介绍