博客列表 >jQuery 的初识—4月2日

jQuery 的初识—4月2日

→忆指凡尘&的博客
→忆指凡尘&的博客原创
2018年04月03日 00:03:11544浏览

大家好:

      以下是我对jQuery的引入方法和$(document).ready(function (){})的使用方法的总结

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 用$(document).ready(function (){})时的加载顺序:
	DOM创建完成就可以运行,不必等到将元素中的图片、视频等全部加载完成
	简写:$(function(){})
    $(document).ready(function (){}) = $(function(){}) -->
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$(document).ready(function (){
		$('h2').css('color','red')
	})
    // 简写
	$(function() {
		$('h2').css('color','green')
	})
</script>  
</head>
<body>
	<h2>php中文网</h2>
</body>
<!-- jquery的两种引入方式:
1.本地引入:直接找到文件后利用'src'来进行引入 -->
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<!-- 2.线上引用:找到jquery的地址进行引入 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	$('h2').click(function(){
		alert('www.php.cn')
	})
</script>
</html>

运行实例 »

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

                                                                            课程总结

        通过对这节jquery的初学使我了解到了以下知识点:

        1.jQuery是一个js函数库,以及它的引用方法(下载后进行本地引入和直接线上引入)

        2.工厂函数$()的两个用法(寻找元素和创建元素)

            (1)$('h2 span').css(‘’)—寻找元素

            (2)$('<img src=" " width=" ">').insertAfter('h2').css(' ')—直接在h2标签后面创建一个元素

        3.DOM对象和jquery对象的转换

            (1)DOM对象转jquery对象: $()

            (2)jquery对象转DOM对象: get()或[]

                     例如:$('li')[0].style.backgroundColor = ''

                               $('li').get(0).style.backgroundColor = ''

        4.注意jquery代码的位置,如果放在DOM结构下面是没有问题,如果放在DOM结构上面时是无法获取元素的(因为                 执行jquery代码时body中的页面还没有渲染,根本无法获取到元素) 

           解决方法:(1)利用window.onload  —   window.onload=function(){ }  

                            (2)利用$(document).ready(function ( ) { } ) 简写 $(function ( ) { } ) 

           推荐使用:$(function ( ) { } )  因为DOM创建完成就可以运行,不必等到将元素中外部图片、视频等全部加载完成


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