JQuery基础_jquery外部是什么意思-CSDN博客

本文链接：https://blog.csdn.net/qq1131410679/article/details/75299988

jQuery是一个快速、简洁的JavaScript框架。封装JavaScript常用的功能代码，极大地简化了 JavaScript 编程。优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery库包含以下功能:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX异步请求方式

一、Jquery的安装

从 jquery官方网站中下载 jQuery 库，并把它放到项目当中就可以。jQuery 库是一个JavaScript 文件，使用 HTML 的 <script> 标签引用，就可以在网页中使用 jQuery 了。（需要javascript的基础）

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
<script>
    //在这里我们就可以使用，jquery来编写代码了

    //这里实现的是，当整个html页面加载完成的时候，就会调用这个方法
    $(function(){
        alert("页面加载完成！");
    })

</script>
</head>
<body>
</body>
<html>

二、jQuery语言基础—基础选择器

jQuery 选择器允许对 HTML元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。类似于的CSS 选择器，还有一些自定义的选择器。
通过这些选择器，来获取相应元素的对象，从而进行相应的操作（类似dom编程）。jQuery 中所有选择器都以美元符号开头：$()

（一）元素选择器

元素选择器基于元素名选取元素。

语法：$("元素名称") 或者jQuery("元素名称")
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <p>p1</p>
    <p>p2</p>

</body>
<script>
        //选取所有的<p>标签，调用hide函数来实现，隐藏<p>标签
        $("p").hide();

</script>
</html>

（二）id选择器

通过 HTML 元素的 id 属性选取指定的元素，页面中元素的 id 应该是唯一的。

语法：$("#元素的id属性") 或者jQuery("#元素的id属性")
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <p id="1">p1</p>
    <p id="2">p2</p>

</body>
<script>
        //选取的id属性为"1"的<p>标签，调用hide函数来实现，隐藏<p>标签
        $("#1").hide();

</script>
</html>

（三）class 选择器

通过指定的 class 查找元素。

语法：$(".元素的class属性") 或者jQuery(".元素的class属性")
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <p class="p1">p1</p>
    <p class="p2">p2</p>

</body>
<script>
        //选取所有的class属性为"p1"的<p>标签，调用hide函数来实现隐藏<p>标签
        $(".p1").hide();

</script>
</html>

更多的选择器可以查看jQuery 官方API

（四）Dom对象和jQuery对象之间的转换

1、Dom对象转换成jQuery对象
语法：var $obj = $(Dom对象)
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <p id="1">p1</p>
</body>
<script>
        //js获取p元素对象
        var p = document.getElementById("1");
        //转换成jQuery对象
        var $obj = $(p);

</script>
</html>

2、jQuery对象转换Dom对象
语法var obj = $jQuery对象.get(0)或者 var obj = $jQuery对象[0]
例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <p id="1">p1</p>
</body>
<script>
        //使用选择器获取jquery对象
        var $p = $("#1");
        //转换成Dom对象
        var obj = $p.get(0);//var obj = $p[0];

</script>
</html>

三、jQuery语言基础—事件函数

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
语法：

$("选择器").事件函数(function(){
  //这里编写需要实现的业务逻辑 

  })

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <button id="b1">点击</button> 
</body>
<script>    
    //通过选择器获取button的对象，然后调用它的 点击事件函数
    $("#b1").onclick(function(){
        alert("你点击了按钮！");
    })

</script>
</html>

同样的，各种元素的各种事件函数都是如此调用。一些常用的事件函数：

页面载入
- ready(fn)
事件处理
- on(eve,[sel],[data],fn)
- off(eve,[sel],[fn])
- bind(type,[data],fn)
- one(type,[data],fn)
- trigger(type,[data])
- triggerHandler(type, [data])
- unbind(t,[d|f])
事件委派
- live(type,[data],fn)
- die(type,[fn])
- delegate(s,[t],[d],fn)
- undelegate([s,[t],fn])
事件切换
- hover([over,]out)
- toggle([spe],[eas],[fn])
事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- focus([[data],fn])
- focusin([data],fn)
- focusout([data],fn)
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])

这里就不一一对所有事件函数进行讲解，有空可以看一下jQuery 官方API。
我们只看看页面载入的事件函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>

<!-- 引入jquery，注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
<script>
        //当整个html页面加载完成的时候，就会调用这个方法
        //类似于JavaScript的window.onload=function(){} ，但是一个页面中只能使用一次，而jquery有多个页面加载事件函数

        $(function(){
            alert("页面加载完成啦~~");
        });

        /*
        也可以写成这样，通过选择器来获取document对象，调用其ready事件。
        $(document).ready(function(){

        })
        */      

</script>
</head>
<body>
    hellow world!
</body>
</html>