JQuery学习笔记

最新推荐文章于 2024-08-15 13:54:22 发布

百奇

最新推荐文章于 2024-08-15 13:54:22 发布

阅读量112

点赞数

分类专栏： JQuery 文章标签：学习

本文链接：https://blog.csdn.net/qq_43264596/article/details/83819220

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>
<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function(){
		$("p").text("P元素被修改");
		});
});
</script>
</head>

<body>
<p>p1</p>
<p>p2</p>
<button>Click Me </button>
</body>
</html>

id选择器：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="Selector.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function(){
		$("#pid").text("P元素被修改");
		});
});
</script>
</head>

<body>
<p>p1</p>
<p id="pid">p2</p>
<button>Click Me </button>
</body>
</html>

类选择器：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="jquery-3.3.1.js"></script>
<script src="Selector.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function(){
		$(".pclass").text("P元素被修改");
		});
});
</script>
</head>

<body>
<p>p1</p>
<p class="pclass">p2</p>
<button>Click Me </button>
</body>
</html>

事件
1、常用事件方法
1）、单点击事件：
单击按钮隐藏

$("button").click(function(){
		$(this).hide();
		});

点击按钮隐藏
2）、双击事件：
双击按钮隐藏

$("button").dblclick(function(){
	$(this).hide();
	});

3）、当鼠标放到按钮上隐藏

$("button").mouseenter(function(){
	$(this).hide();
	});

4）、当鼠标移开

$("button").mouseleave(function(){
	$(this).hide();
	});

2、事件的绑定和解除
bind 可以用on代替
unbind可以用off代替
官方推荐On Off写法
$("#ClickMeBtn").on"click",function(){});
$("#ClickMeBtn").off(“click”);
3、事件的目标
绑定点击事件以后会有CurrentTarget和Target ，这两个指向是不同的
CurrentTarget：给谁设置的监听事件CurrentTarget就指向谁
Target：通过谁触发事件就指向谁
当点击子组件的时候父组件绑定的事件也会被触发，先触发子组件的绑定事件，再触发父组件的绑定事件
4、事件的冒泡
如何阻止事件冒泡：
1）、event.stopPropagation() ：阻止父级的冒泡事件
2）、event.stopImmediatePropagation()：阻止所有的冒泡事件
小Tip:
并不是所有浏览器都支持Console方法，在实际项目中Console太多有可能会报错，所以可以写一个方法，在编译时直接将方法注销掉就可以了
function conlog(event){
console.log(evet)
};
当使用时直接调用conlog函数就可以了
conlog（event）;
5、自定义事件

//为Button添加一个点击事件
$("#CkickMeBtn").click(function (){
		var e = jQuery.Event("MyEvent");
		$("#CkickMeBtn").trigger(e);
		});
$("#CkickMeBtn").bind("MyEvent",function (event){
			console.log(event);
			});

百奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记

1、jQuery库可以通过一行简单的标记被添加到网页中2、JQuery是一个JavaScript的函数库3、JQuery的功能：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTML DOM遍历和修改AJAX功能主要是在不刷新页面的同时来修改页面的内容将服务器所请求的数据直接显示在页面上，带来好的用户体验Utilities（提供的工具...
复制链接

扫一扫

专栏目录