JQuery基础

来源：互联网发布：算法跟数学的关系编辑：程序博客网时间：2024/06/04 17:51

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>

还有更多的jQuery知识是需要去学习的，我们可以通过查阅jQuery 官方API 来学习。

阅读全文

0 0