JQuery学习笔记
1、jQuery库可以通过一行简单的标记被添加到网页中
2、JQuery是一个JavaScript的函数库
3、JQuery的功能：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
功能主要是在不刷新页面的同时来修改页面的内容将服务器所请求的数据直接显示在页面上，带来好的用户体验
Utilities（提供的工具类）
引入JQuery
网页中添加jQuery
1、从jQuery.com下载JQuery库
2、从CDN中载入JQuery，如从Google中加载JQuery（要考虑服务器在国内还是国外）
a、百度和新浪的服务器存有JQuery
例如：http://libs.baidu.com/jquery/1.10.2/jquery.min.js
b、谷歌和微软的服务器中存有jQuery
例如：http://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js
jQuery选择器
标签选择器：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="Selector.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<button>Click Me </button>
</body>
</html>
// JavaScript Document
$(document).ready(function() {
$("button").click(function(){
$("p").text("P元素被修改");
});
});`在这里插入代码片`
id选择器：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="Selector.js"></script>
</head>
<body>
<p>p1</p>
<p id="pid">p2</p>
<button>Click Me </button>
</body>
</html>
$(document).ready(function() {
$("button").click(function(){
$("#pid").text("P元素被修改");
});
});
类选择器：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="Selector.js"></script>
</head>
<body>
<p>p1</p>
<p class="pclass">p2</p>
<button>Click Me </button>
</body>
</html>
// JavaScript Document
$(document).ready(function() {
$("button").click(function(){
$(".pclass").text("P元素被修改");
});
});
事件
1、常用事件方法
2、事件的绑定和解除
bind 可以用on代替
unbind可以用off代替
官方推荐On Off写法
$("#ClickMeBtn").bind(“click”,function(){});
$("#ClickMeBtn").unbind(“click”);
3、事件的目标
4、事件的冒泡
5、自定义时间
上一篇： study day02
下一篇： [STL]: 模拟实现String类