JQuery是什么?怎么使用JQ?
JQuery是什么?
jQuery是一个简洁快速的JavaScript脚本库,它允许我们在网页上简单的操作文档、处理事件、运行动画效果或者添加异步交互。
JQuery版本的的心路历程:
怎么使用JQ?
- 可以从官网下载及本地进行使用
从jQuery的官方网站(http://jquery.com)下载jQuery的脚本文件。
将下载的文件放置到项目的指定文件夹中,通常放在js文件夹中,然后在需要应用jQuery的页面中使用下面的语句,将其引用到文件中。<script language="javascript" src="js/jquery-1.11.1.min.js"></script>
或者
<script type="text/javascript“ src="js/jquery-1.11.1.min.js"></script> 注意:引用jQuery的<script>标签,必须放在所有的自定义脚本文件的<script>之前,否则在自定义的脚本代码中找不到jQuery脚本库。
另外一种是在html文件下直接引用jq文件,来自于网上的服务器,无网络则报错。
这只是其中一个,有各种各样的cdn。
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
配合bootstrap使用:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 --><!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><h1>你好,世界!</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body>
</html>
编写第一个JQuery脚本:
(1)创建一个名称为js的文件夹,并将jquery-1.11.1.min.js复制到该文件夹中。
(2)<script language="javascript" src="js/jquery-1.11.1.min.js"></script>
在html页面引用:
<script>
$(document).ready(function(){alert("我的第一个jQuery脚本!");
});
</script>
或者:
<script>
$(function(){alert("我的第一个jQuery脚本!");
});
</script>
window.load() 方法与$(document).ready() 方法的区别:
$window.load()方法:在页面所有的内容都载入完毕后才会执行。
$(document).ready()方法:在DOM元素载入就绪后执行 。
注意:
在一个页面中可以放置多个$(document).ready()方法,而window.load()方法在页面上只允许放置一个 。
$(document).ready()方法比window.load()方法载入速度更快。
JQuery对象:
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里面的方法。
用#id作为选择符取得的是jQuery对象,而使用document.getElementById(“id”)得到的是DOM对象,这两者并不是等价的。
jQuery对象转换成DOM对象 :
或者:
DOM对象转换成jQuery对象 :
jQuery库在其他库之后导入
jQuery库在其他库之后导入,使用jQuery.noConflick()方法将变量$的控制权让给其他库。
三种方式:
JQuery插件的使用:
(1)把下载的插件包含到标记内,并确保它位于主jQuery源文件之后。
(2)包含一个自定义的JavaScript文件,并在其中使用插件创建或扩展的方法。
JQuery是什么?怎么使用JQ?相关推荐
- JQuery 的部分高级语法
JQuery 高级 1. 动画1. 三种方式显示和隐藏元素1. 默认显示和隐藏方式1. show([speed,[easing],[fn]])1. 参数:1. speed:动画的速度.三个预定义的值( ...
- jQuery使用手册
jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的! ...
- jQuery调试学习总结
如何对jQuery代码进行简单的调试 在html开发中,jQuery可以说得上是神器了,几乎没有WEB开发者没有听过jQuery,它的强大无需多言!用发它,可以帮我们大大加快开发速度. 那么,对于初学 ...
- 学习笔记(七)——jQuery(一)
Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作就是封装了JavaScript,能够简化我们写代码的一个JavaScript库 文章目录 一.JQ的引入 ...
- JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery进阶学习
JQuery进阶学习的内容 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插 一. 动画 三种方式显示和隐 ...
- js06--函数库jq与prototype
接着我们继续学习一些js的知识,这里主要讲js的一些库jq与prototype的一些基础. 1.jq函数 $():向其传递DOM对象,返回jQuery对象 jq允许通过CSS ...
- 仿jquery 编写自己的js库
先思考alert(typeof $)的结果中的$,它是一个对象,也是一个函数. 所以美元符字面上是jquery,其实就是一个jq对象,里面可以接受函数,字符串(#xxx,.xxx,xxx... 分别表 ...
- jQuery基本使用
一.what 1).一个优秀的JS函数库: 2).中大型WEB项目开发的首选: 3).使用了jQuery的网站超过90%: 4).http://jquery.com/; 二.why(即jq的好处) h ...
- html tab与jQuery,使用jquery实现div的tab切换实例代码
jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 最新评论近期热评随机文章 1234567890-1 1234567890-2 1234567890 ...
最新文章
- FPGA实验三——计数器的实现并用SignalTap验证
- oracle如何清空一个用户下的所有表中的数据?
- BZOJ 3925 [Zjoi2015]地震后的幻想乡 ——期望DP
- 我们如何衡量一个微服务实施的成功
- org.apache.commons.io——FileUtils学习笔记
- 从拉格朗日乘数法到KKT条件
- 河北大学计算机专业调剂,【计算机考研调剂】河北大学2021级硕士研究生预调剂信息统计的通知...
- Flex App的Size和Link报告
- 阿里巴巴编码规范java
- (转)MapReduce中的两表join几种方案简介
- SpringCloud之Ribbon源码分析(一)
- WPF NotifyIcon使用
- 看小姐姐用动图展示 10 大 Git 命令
- kafka sasl java_Kafka安装及开启SASL_PLAINTEXT认证(用户名和密码认证)
- Unreal4引擎开发学习日志
- 异次元发卡网邮箱SMTP配置教程
- node--puppeteer网页截屏
- 三维智慧城市数字孪生应用可视化设计
- AWS 中文入门开发教学 28- 链接Rout53和freenom - 设置托管区(Hosted Zone)和名字服务器(NS)
- Linux系统之Xinetd服务
热门文章
- 大学c语言作业用什么搜题比较好,快速查找题库_什么手机软件可以把题库输入进去然后输入关键字可以查找点道题_淘题吧...
- leetcode笔记 844比较含退格的字符串 python
- 自学Android开发 AES加密
- 解决Win10任务栏图标消失
- C++中的平方、开方、绝对值怎么计算
- ctab法提取dna流程图_(完整版)CTAB法提取DNA原理及步骤、制胶、电泳
- idea莫名其妙打不开了怎么办
- Spring入门书籍
- LZY碎大石(YYOJ)(优先队列
- Android 获得app的应用签名