js进阶 10-1 JQuery是什么

一、总结

一句话总结：

1、两种引用jquery的方法？

可以在线jquery和本地jquery两种

2、jquery主要好处？

浏览器兼容问题

二、js进阶 10-1 JQuery是什么

1、相关知识点：JQuery概述

1.JQuery简介
  • JQuery是一个JavaScript库。极大地简化了JavaScript编程。
  • JQuery拥有强大的选择器支持，支持CSS1-CSS3几乎所有的选择器，以及JQ独创的高级而复杂的选择器。
  • 解决了不同浏览器间的兼容问题
  • 代码简洁，功能强大，易于理解......
2.JQuery的引入

注：jquery1.x版本支持IE 6/7/8;jquery-2.x以上版本不再支持IE 6/7/8

目前最新版本为jquery-3.1.1(最新），大家可以随时关注官网最新版本的动态，对于初学者来说，看教程的时候，你看以前版本的教程书籍依然有用，很对新版本增加的功能对于初学者未必用得上，另你掌握了一个版本的用法之后，即使版本后续有更新，只要关注更新部分即可，不会对学习造成太大的困扰.......

JQuery各版本下载地址

  • 官网下载到本地引入
  • 百度压缩版本引用地址1：
    http://libs.baidu.com/jquery/2.0.0/jquery.min.js
  • 百度压缩版本引用地址2：
    https://code.jquery.com/jquery-3.1.1.min.js
    .....
3.JQuery的语法

基础语法是：$(selector).action()

  • 美元符号定义JQuery

    • $就是jquery对象
    • $是JQuery中选取元素的符号
    • $是JQuery中功能函数的前缀(功能函数后边再讲)
  • 选择符(selector)"查询"和"查找"HTML元素
  • JQuery的action()执行对元素的操作
4.document.ready和window.onload的区别

Jquery中$（document).ready()的作用类似于传统javaScript中的window.onload方法，不过与window.onload方法还是有区别的。

  • $（function(){})和$（document).ready(function(){})这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数
    Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  • Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  • Window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <!-- <script type="text/javascript" src="jquery-3.1.1.min.js"></script> -->

 <!--     <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <script type="text/javascript">

         $(function(){

             alert('hello,jQuery!')

         })

     </script>

 </head>

 <body>

 </body>

 </html>
 
 
 
 

js进阶 10-1 JQuery是什么的更多相关文章

  1. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  2. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  7. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  8. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  9. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  10. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

随机推荐

  1. Java Web学习总结（18）——JSP标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  2. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  3. Redis实现Mybatis的二级缓存

    一.Mybatis的缓存 通大多数ORM层框架一样,Mybatis自然也提供了对一级缓存和二级缓存的支持.一下是一级缓存和二级缓存的作用于和定义. 1.一级缓存是SqlSession级别的缓存.在操作 ...

  4. jqgrid 实现行编辑，表单编辑的列联动

    这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...

  5. c++11 多线程 -- 基本使用

    c++11 多线程 – 基本使用 前言:这篇文章仅针对没有使用过c++11线程库的童鞋来高速入门,也是自己的一个简单记录,内容比較基础. 1.线程的基本使用 2.相互排斥量 3.条件变量 4.原子变量 ...

  6. 使用MongoDb连接数据库服务器

    链接MongoDb数据库服务器的字符串格式: mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN] ...

  7. 算法 Tricks（六）— if 条件分支的简化

    考虑下面的三分支的定义式: f=⎧⎩⎨⎪⎪a,b,a+b,x>yx<yx=y int f = 0; if (x >= y) f += a; if (x <= y) f += b ...

  8. width:100%和width:inherit

    前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...

  9. 小米笔记本（13.3 I7） ubuntu14.04下网卡驱动安装

    ubuntu 内核升级到4.6.4(更高版本可能造成系统无法启动) kernel debian包下载地址 http://kernel.ubuntu.com/~kernel-ppa/mainline/v ...

  10. C++项目參考解答：累加求圆周率

    [项目-累加求圆周率] 用例如以下公式求π的近似值(计算直到最后一项的绝对值小于10−5) π4=1−13+15−17+... [參考解答] #include <iostream> usi ...