jQuery基础知识笔记 (一)

jQuery官网:https://jquery.com/
在线API:https://api.jquery.com/
jQuery UI:https://jqueryui.com/
API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码
高版本的jQuery不支持IE浏览器,注意匹配

1. 框架库和jQuery介绍
jQuery就是JavaScript语法写的一些函数类,内部仍然是调用JS实现的,所以并不是代替JS。可以说jQuery本身就是一堆JS函数,jQuery就是一个JS的函数库
2. jQuery文件使用
(1)为什么要学习jQuery?
DOM中一个简单的功能需要大量的代码;兼容问题很多;代码容错性很差;window.onload也只能有一个
(2)jQuery好处:解决浏览器兼容性问题,体积小,链式编程,隐式迭代,插件丰富,开源,免费
(例题)点击按钮出现一个蓝色小方块

<script>//Dom中写法
        window.onload=function () {
   
            document.getElementById("btn").onclick = function () {
   
                var divObj=document.getElementById("dv");
                divObj.style.width="100px";
                divObj.style.height="100px";
                divObj.style.backgroundColor="blue";
            }
        }
</script>
<script src="jquery.js"></script>//jQuery写法
    <script>
        //页面加载后的一个事件
        $(function(){
   
            $("#btn").click(function () {
   
                $("#dv").css({
   "width":"100px","height":"100px","backgroundColor":"blue"});
            });
        })
    </script>

3. jQuery中顶级对象"$"
BOM(浏览器对象模型)中是Window,DOM中是document(文档对象模型)

  • $();:是jQuery的简写,相当于js中的window

  • jQuery();:写法不同,意义一样

  • document:直接写表示的是document对象,只能点出dom的属性和方法

  • $(document):表示的是jQuery对象,只能点出jq的属性和方法

BOM:《JavaScript 闯关记》之 BOM
4. jQuery中事件加载(疯狂吐槽这个编辑器两个美元符号不能同时出现的功能,会变成一种标签,以下内容看到‘美元符号’字样自觉联想符号)
window.onload只能写一次,重复会被后面的干掉,页面所有的标签图片、外部引入加载后才触发,如果有了两个也只执行最后一个
$(document).ready()DOM基本标签加载后就触发,可以写多个,和美元符号(function)一样
加载顺序效果展示

<script src="jquery.js"></script>
<script>
    //jQuery代码和DOM中的window.onload事件是相同的
    //$(window).load()加载速度最慢
    $(window).load(function () {
   
      console.log('111111')
    });
    //$(document).ready()加载速度更快
    $(document).ready(function () {
   
        console.log('222222')
    })
    $(document
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值