简单概括一下jQuery的实现原理

1)jQuery的代码都是写在一个立即执行函数里面,形成私有作用域,避免命名空间污染

2)window 对象上有两个公共的接口,分别是 $ 和 jQuery:

window.jQuery = window.$ = jQuery;

这一句话将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和 , 因 此 我 们 才 可 以 在 外 部 直 接 使 用 j Q u e r y 和 ,因此我们才可以在外部直接使用jQuery和 使jQuery。window是默认的JS上下文环境,因此将对象绑定到window上面,就相当于变成了传统意义上的全局变量

3)jQuery.fn指向jQuery.prototype,这样可以达到书写简洁的目的。

2)jQuery()和$()是jQuery中最常用的方法,他们的调用结果是返回一个jQuery实例对象,

3)编写组件通常的做法是将组件封装成一个对象,需要用的时候则通过new运算符来创建一个实例。但是jQuery( )无须我们用new手工实例化,它会自动返回一个实例(即隐藏了new的过程)。这是因为在jQuery()函数中返回了jQuery.prototype.init()的实例对象,而jQuery.prototype.init.prototype=jQuery.prototype,这样new出来的init()实例对象能继承所有jQuery的方法,从而解决函数调用的问题。

var nodeList = (context || document).
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的使用jQuery实现购物车的例子: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .item { margin-bottom: 10px; } .item input[type="checkbox"] { margin-right: 5px; } .total { font-weight: bold; } </style> </head> <body> <h1>购物车</h1> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品1 - 100元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品2 - 200元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品3 - 300元</span> </div> <div class="total"> 总价:<span id="totalPrice">0</span>元 </div> <script> $(document).ready(function() { // 全选按钮点击事件 $("#selectAll").click(function() { $(".checkbox").prop("checked", $(this).prop("checked")); calculateTotalPrice(); }); // 单个商品复选框点击事件 $(".checkbox").click(function() { calculateTotalPrice(); }); // 计算总价 function calculateTotalPrice() { var totalPrice = 0; $(".checkbox:checked").each(function() { var price = parseInt($(this).next().text().split(" - ")[1]); totalPrice += price; }); $("#totalPrice").text(totalPrice); } }); </script> </body> </html> ``` 这个例子中,我们使用了jQuery来实现购物车的功能。每个商品都有一个复选框和对应的价格,用户可以通过勾选复选框来选择要购买的商品,同时总价会实时更新。点击全选按钮可以全选或取消全选。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值