jQuery 是一个 JavaScript 函数库。

jQuery 极大地简化了 JavaScript 编程。写得少做的多

引入jQuery 库

下载引入

1.x 2.x 3.x CDN

  • 压缩版 compressed min.js
    上线部署
  • 未压缩版 uncompressed
    学习使用
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
 将下载的文件放在网页的同一目录下，就可以使用jQuery

没有在

在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言

CDN引入

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

cdn优势：用户访问其他站点时，已经从 cdn 加载过 jQuery，所以当他们访问自己的站点时，会从缓存中加载 jQuery 减少加载时间，提高加载速度

查看使用版本

浏览器控制台 Console 使用

$.fn.jquery
"2.0.3"

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取元素进行某些操作

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

$定义 jQuery

选择器 selector ’查询‘，’查找‘HTML 元素

action() 执行对元素的操作

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

入口函数

文档就绪事件

document ready函数

$(document).ready();

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

简洁写法：

$(function(){
//jquery代码
})

//$可以和 jQuery 做替换

原生 js 和 jQuery 入口函数写法对比

<html>

<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>    
        //1.通过原生js入口函数来拿到DOM元素
        window.onload=function(ev){
            var img=document.getElementsByTagName('img')[0];
            console.log(img);
            
        }
        
        //2.
        $(document).ready(
            function(){
                var $img=$('img')[0];
                //jquery 拿到dom元素
                console.log($img);
            }
        )

    </script>
</head>

<body>
<img src='http://121.196.173.254/assets/img/tx.jpg'>
</body>
</html>

原生 js 和 jQuery 不同

1.加载模式不同

原生 JS 会等到 DOM 元素加载完毕，并且图片也加载完才会执行

jQuery 只会等到 DOM 元素加载完，不会等到图片加载完毕就执行

2.原生 JS 如果编写了多个入口函数，后面的会覆盖前面的

jQuery 编写多个入口函数，后面的不会覆盖前面的

<html>

<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>    
        // window.οnlοad=function(ev){
        //     alert('function1');
        // }
        // window.οnlοad=function(ev){
        //     alert('function2');
        // }


        $(document).ready(
            function(){
                alert('function1');
            }
        )

        $(document).ready(
            function(){
                alert('function2');
            }
        )
    </script>
</head>

<body>
<img src='http://121.196.173.254/assets/img/tx.jpg'>
</body>
</html>

jQuery 冲突问题

1.释放 $ 使用权

jQuery.noConflict()

注意：释放操作必须在编写其他 jQuery代码之前编写

释放之后不能再使用 $，改为使用 jQuery

2.自定义访问符号

var jq=jQuery.noConflict():

jQuery核心函数

$(); 就代表调用了核心函数

可以接受参数类型：

  1. 接收一个函数
  2. 字符串
  1. 字符串选择器
  2. 代码片段
  1. DOM元素

jQuery选择器

可以对html元素组或单个元素进行操作

基于css选择器

jQuery所有选择器以 $ 符号开头

  • 元素 选择器
    $(’ p ')
  • #id 选择器
    id 应该是唯一的
    $(’ #id ')
  • .class 选择器
    $(’ .class ')

事件

.action()

$(document).ready()

  • click() 单击
  • dblclick() 双击
  • mouseenter() 鼠标穿过
  • mouseleave() 鼠标离开
  • mousedown() 鼠标按键
  • hover() 光标悬停
    相当于mouseenter() 鼠标穿过 + mouseleave() 鼠标离开

jQuery HTML

jQuery获取内容

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值 $("#test").val()

获取属性

  • 获取属性 - attr() $("#runoob").attr(“href”)

ES6新增了​​let​​​命令，用来声明变量。它的用法类似于​​var​​​，但是所声明的变量，只在​​let​​命令所在的代码块内有效