JQuery入门上课笔记

最新推荐文章于 2023-02-21 20:07:35 发布

原创最新推荐文章于 2023-02-21 20:07:35 发布 · 227 阅读

CC 4.0 BY-SA版权

文章标签：

48 篇文章

订阅专栏

本文介绍了JQuery这一轻量级JavaScript库的基本概念及其优势，并详细讲解了如何导入及初步使用JQuery实现简单的页面操作功能，包括弹窗提示、事件处理等。

1.什么是JQuery?

它是一个轻量级的javascript类库。

2.JQuery优点

2.1 总是面向集合
2.2 多行操作集于一行

2.3 比起js更方便操作页面控件

<script type="text/javascript" src="js/jquery.min.js"></script>

src:编写JQuery文件在项目中的路径

4.初步使用JQuery

JQuery弹窗(Hello world!!!)

<script type="text/javascript">
	$(function(){
		alert("Hello JQuery...");
	});
</script>

5.$(fn)、$(document).ready(fn)与window.onload的区别？

fn类似function函数

$(function(){
		alert("不一样的烟火是我");
	});
$(document).ready(function(){
		alert("不一样的烟火是我");
	});

window.onload=function(){
		alert("我是不一样的烟火");
	}

执行顺序区别：前两者相等价，谁在前谁先执行，最后一个window.onload等页面加载完之后执行覆盖

6.JQuery三种工厂方法

6.1 jQuery(exp[,context])

exp：选择器

context：上下文，环境/容器，documemt

注1：选择器，css选择器

标签选择器： example: $("标签名")

ID选择器: example:$("标签类定义的id属性名")

类选择器 example:("标签类定义的class属性名")

包含选择器：E1 E2 example:$("标签+空格+标签体内的标签名") 注：标签体内只可有一个标签

组合选择器：E1,E2,E3 example:$("标签1,标签2")多个标签执行同一方法

自定义选择器：:exp

6.2 jQuery(html) （demo3.jsp）

html：基于html的一个字符串

6.3 jQuery(element) （demo3.jsp）

element：js对象，表示一个html元素对象

js对象与jquery对象的相互转换

7. this指针的作用（demo4.jsp）
7.1 事件源（获取当前按钮的按钮值）

$(function(){
		$(":input").click(function(){
			alert(this.value);
		});
	});

7.2 当前元素（点击按钮，获取所有a标签的值）

$(function(){
	$("a").each(function(){
		  alert($(this).val());	
	});
});