jQuery入门篇

最新推荐文章于 2023-07-17 19:26:13 发布

杭杭杭杭杭_

最新推荐文章于 2023-07-17 19:26:13 发布

阅读量219

点赞数

分类专栏： Java 文章标签： jQuery DOM操作事件处理 JavaScript库 Ajax

本文链接：https://blog.csdn.net/soul778888/article/details/108879360

版权

Java 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简介
           jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。
           优点：
               极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。

导入jquery库
			<script type="text/javascript" src="jquery.js"></script>
在新的script标签中编写代码
			<script type="text/javascript">
				$(function(){
					//文档加载完成以后执行
					$("#btnId").click(function(){
						alert("HelloWorld");
					});
				});
			</script>
			<button id="btnId">点我</button>

$的本质: jQuery的核心函数
核心函数作用
           1）、传入的参数为 [函数] 时：
                   文档加载完成后执行函数 $(function(){});
           2）、传入参数为 [ HTML 字符串 ] 时:
                   创建节点对象 $("<p>你好</p>")
           3）、传入参数为 [ 选择器字符串 ] 时：
                   按照选择器找出元素 $("#id");
           4）、传入参数为 [ DOM对象 ] 时：
                   把dom对象转为jquery对象 $(dom对象)

dom对象与jQuery对象
           1）、什么是dom对象
               原生js获取的创建的对象都是dom对象
           2）、什么是jQuery对象
               用jquery创建或者获取的对象都是jquery对象
           3）、相互转化
               dom-->jQuery： $(dom对象)
               jQuery-->dom：   jquery查找到的元素返回的都是dom对象的数组
                               通过数组下标的方式获取即可       $("p")[0]

            var dom1=document.getElementById("dom1");
            var test=document.getElementById("test");
             dom1.onclick=function () {
                 //DOM->DOM
                     test.style.color="red";

             };
            var dom2=document.getElementById("dom2");
            dom2.onclick=function () {
               // test.style.color="red";
                //>DOM->jQ
                   $(test).css("color","blue");
            }
            $("#jqu1").click(function () {
               //jQ->jQ
                    $("#test").css("color","red");
            });
         
            $("#jqu2").click(function () {
               //jQ->DOM
                     $("#test")[0].style.color="red";
            });
<body>
<div id="test">颜色变换</div>
<button id="dom1">DOM->DOM</button>
<button id="dom2">DOM->jQ</button>
<button id="jqu1">jQ->jQ</button>
<button id="jqu2">jQ->DOM</button>
</body>

杭杭杭杭杭_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门篇

简介 jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。优点：极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。导入jquery库 <script type="text/javascript" src="jquery.js"></script>在新的script标签中编写代码 &...
复制链接

扫一扫

专栏目录