第一章jQuery概述

最新推荐文章于 2024-07-16 16:43:05 发布

PPDY小芽

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量115

点赞数

文章标签： jquery javascript html js css

本文链接：https://blog.csdn.net/PPDY93/article/details/118262977

版权

文章目录

第一章 jQuery概述

第一章 jQuery概述

1.jQuery的核心特性

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，
并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

2.jQuery库文件

jquery-1.版本号.js（开发版）
jquery-1.版本号.min.js（发布版）
页面中引入jQuery
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

3.jQuery基本语法

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		alert("第一个jQuery程序");
	})
</script>

4.$(function(){})与window.onload

	window.onload	$(function(){})
执行时机	必须等网页中所有内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){//执行代码}) ;

5.Dom模型

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
节点对象就被称为DOM对象
节点类型
	元素节点<h1>……</h1>
 	文本节点<p>此处的文字是文本节点</p>
 	属性节点<p class=”one”></p>

6.DOM对象和jQuery对象

DOM对象直接使用JS获取的对象节点如：
var domEle = document.getElementById('one');
var objHTML = domEle.innerHTML;

jQuery对象使用jQuery包装DOM对象后产生的对象，可以使用jQuery中的方法
$("#one").html();

<p id="content">这个是一个段落标记</p>
<input type="button" onclick="jsFun();" value="dom"/>
<input type="button" onclick="jqueryFun();" value="jquery"/>
function  jsFun(){
    var conEle = document.getElementById('content');
    alert(conEle.innerHTML);
}
function  jqueryFun(){
   var conEle = $("#content").html();
    alert(conEle);
}

7.jQuery语法结构

$(选择题).方法()；
工厂函数$()：将DOM对象转化为jQuery对象
选择器selector:获取需要操作的DOM元素
方法action():jQuery中提供的方法，其中包括绑定事件处理的方法

.one{
    color: cornflowerblue;
    font-size: 12px;
}
.two{
	color: red;
	font-family: "微软雅黑";
	}
Jquery代码：
$("div").addClass("one").remove("two");

8.Dom对象与jQuery对象相互转化

1>DOM转化为jQuery
使用$()函数进行转化$(DOM对象)

var conEle = document.getElementById('content');//获取的dom对象
var $con =$(conEle);//将dom对象转化为jQuery对象
alert($con.html());//此时可以使用jQuery对象的方法

2>jQuery转化为DOM

var $conEle = $("#content");//获得jQuery对象
var conEle =  $conEle.get(0);//jQuery对象转化为DOM对象
alert(conEle.innerHTML);//调用DOM对象的方法

9.练习

1>使用jquery给页面添加样式，点击 h1, 更改自身的颜色，以及p 的效果
2>点击图片，实现自身添加边框，并设置内边距为10px
3>点击标题，隐藏的内容显示出

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() { //功能1
				$("h1").click(function(){
					$(this).css("color","red");
					$("p").css("color","blue");
				});
			})
			$(function(){ //功能2
				$("img").click(function(){
					$(this).css({"padding":"100px","spacing":"100px","border":"1px solide yellow","width":'200px'});

				});
			})
			$(function(){ //功能3
				$("a").click(function(){
					$("#id01").show(2000);
					$(this).hide(1000);
					$("#p01").hide(1000);
				});
			})
		</script>
	</head>

	<body>
		<h1 >《初恋》</h1>

<p>记得苹果树下初次相会<br />

你乌黑的云发刚刚束起<br />

一把雕梳斜插在头上<br />

衬着脸庞如花似玉<br />

你温情地伸出白皙的纤手<br />

把苹果塞进我的怀中<br />

那微泛红晕的秋之硕果<br />

恰如我俩萌生的恋情<br />

但我无意地吐出叹息<br />

轻轻飘落在你的双鬓<br />
</p>
<p id="p01">
	...
</p>
<a href="#">点击查看全部</a>
<p id="id01" style="display: none">
	欢乐的恋爱之杯<br />
斟满你的蜜意柔情<br />

在那片苹果树林里<br />

有条自然而成的小路<br />

羞赧地向我问起<br />

是谁最早把它踏出<br />
</p>
<!--<img src="img/01.jpg" />-->
	</body>

</html>

PPDY小芽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
第一章jQuery概述

文章目录第一章 jQuery概述1.jQuery的核心特性2.jQuery库文件3.jQuery基本语法4.$(function(){})与window.onload5.Dom模型6.DOM对象和jQuery对象7.jQuery语法结构8.Dom对象与jQuery对象相互转化9.练习第一章 jQuery概述1.jQuery的核心特性具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。2.jQuery库文件jqu
复制链接

扫一扫