博客列表 >4.2-jquery的引入方式及$()的用法!(代码如下)

4.2-jquery的引入方式及$()的用法!(代码如下)

SMI的博客
SMI的博客原创
2018年04月09日 00:17:31775浏览

4.2-jquery的引入方式及$()的用法!(代码如下):

实例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4.2-jquery引入方式及$()的使用方法</title>
	  <!-- 这是JQ的外面引入方式  -->
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	 <!-- 这是JQ的本地引入方式  -->
	<script type="text/javascript" src="../xxx/jquery.3.3.1.js"></script>
	<script type="text/javascript">
	 $(function(){
	 $("p").css('color','orangered')
	 })
	</script>
	<style type="text/css">
	.green{color:green;background-color:yellow;}
	</style>
</head>
<body>
	<p>jquery的两种引入方式:<br>
	1.外面引入,很多大型网站都提供Jquery的公共静态库的地址,只需在script中加入src的网络资源路径即可引入成功。
	<br>2.还有一种方式是本地引入,就是去官网或其它提供下载的地方下载到本地,在script中加入src的本地路径即可引入成功。<br>两种方式各有优劣,依实际情况而定,
	如果公共库网络出现问题,那么引入了这个库的网站也会出现问题,所有JQ实现的内容无法完成。本地引入则可以避免这个现象!</p>
	<p>业面加载完成执行JQ的两种方式:<br>
	1.window.onload = function(){}<br>
	此种方法需要页面全部资源加载完成后才会执行function里面的函数内容,如果页面无素较多较大,则页面的体验度非常差,不建议用此种方法!<br>
	2.$(document).ready()用法如下:<br>
	  a:此方法与window.onload方法类似,但该种方法更好用!<br>
	  $(document).ready(),document是指整个html元素,只要页面中的元素DOM结构加载完成就可以执行,无须等待所有资源加载完成.如图片,音乐等.<br>
	  常用的语法有:1.$(document).ready(function)   2.$(function)<br>
	  主要就有这两种方式: 前面这种是完整写法,后面这种为简写.括号中的function是页面DOM加载完成后需要执行的函数!</p>
	  <p>下面来举一个实例:$(function)方法来实现:<br>
	 如果P标签里面的所有字体变橙红色了,说明该方法执行成功!</p>
	 <span>今天还提到一个$().addClass()方法<br>
	 此方法可以向页面元素中加入class.下面来举一个实例:<br>
	 <button type="button">点击变绿字黄底</button>
	 <script type="text/javascript">
	$('button').click(function(){
	$('span').addClass('green')
	}
	)
	 </script>
	 </span>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

页面运行效果图如下:

ddd.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议