jQuery入门篇

简介
            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>

 

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页