jq基础

一、jQuery基础
1.1 什么是jQuery

jQuery 是一个高效、精简并且功能丰富的 
JavaScript 工具库jQuery极大的简化了JavaScript 编程

1.2 什么是JS类库

它就是一些函数的集合，就是把特定效果的代码写好，你只需要在用的时候要用很少的代码去调用。
起主导作用的是你的代码，由你来决定何时使用类库。

1.3 常见JS类库

jQuery
ExtJS
prototype.js
zepto.js

1.4 jQuery的优势

开源 兔费
便捷的选择器
方便的DOM操作
方便的动画特效
易用的ajax操作
丰富的插件扩展
解决浏览器兼容性效果

1.5 jQuery的版本

1.x.x的版本是可以 支持 IE6~IE8的
2.x.x到3.x.x 的版本，不在兼容IE8以及以下浏览器

1.6 jQuery相关网站

官网 https://jquery.com/
文档APl: http://jquery.cuishifeng.cn/index.htm

二。jQuery基本使用
2.1 安装下载到本地再使用

https://jquery.com/download/

<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>

或者直接使用CDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>abc</title>
    <!-- 在这里添加 jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>
<body>
    zys

    <!-- 你可以在这里添加其他脚本 -->
    <script>
        $(document).ready(function() {
            // 这里可以写 jQuery 代码
            console.log("jQuery is ready!");
        });
    </script>
</body>
</html>

#官网
https://www.bootcdn.cn/jquery/

2.2 jQuery对象
$是jQuery的别名

jQuery('.item').show()
//等同于
$('.item').show()

$对象可以用作选择器获取元素，还可以创建DOM对象

2.3 文档就绪事件

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

可以简写

$(function(){
 
   // 开始写 jQuery 代码...
 
});

2.4 连贯操作

//对象可以连贯调用
$(dom).find('img').css('border','1px solid #ccc').css('color', 'red').prop('src', '1.jpg').toggle()

2.5 jQueryDOM和jsDOM

通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM
通过jQuery选择器获取的dom对象，我们称之为jQuery DOM
jQuery DOM本质上 是由JSDOM组成的集合，是个类数组对象。可以通过索引 获取其中的jsDOM
$(jsDoM)可以转为jQuery DOM

评论 (0)