jQuery가 직접 $ 연산을 할 수 있는 이유를 생각해보니 네이티브 js보다 DOM 연산이 더 편리하고 원하는 만큼 직접 연쇄 연산이 가능합니다
<span style="font-size: 14px;">(function(window, undefined) {<br> function jQuery(selector){<br> return new jQuery.fn.init(selector)<br> }<br> jQuery.fn = jQuery.prototype = {<br> init: function () {<br><br> }<br> }<br> jQuery.fn.init.prototype = jQuery.fn;<br> window.jQuery = window.$ = jQuery;<br>})(window)<br></span>
매개변수 창을 전달하는 닫힌 구조
창에 대한 각 내부 참조의 쿼리 시간을 줄입니다.
코드 압축에 편리함
전달된 패키지 구조 실제 매개변수 창을 사용하고 형식 매개변수를 사용하여
때문에 메소드가 내부적으로 jQuery 프로토타입으로 확장되면 init에도 이 메소드가 있습니다. 멋지지 않습니까? $()에서 나오는 jQuery 객체가 있습니까? 멤버 jQuery를 $
창에 노출시킨 후 jQuery와 $를 글로벌 세계에서 직접 사용할 수 있습니다
Judgment
列如可能是个html标签，那么直接create一个selector标签的DOM对象包装成jQuery对象return出去
列如可能是个id名、类名、标签名等等，那么直接通过Sizzle获取到DOM对象包装成jQuery对象return出去
判断是在init内部判断selector的类型，
包装
我已经说了很多次的包装了，没错，jQuery对象其实也是个伪数组，这也是它的设计巧妙之处，因为用数组存储数据方便我们去进行更多的数据处理，比如 $("p").css("color": "red") ,那么jQuery会自动帮我们隐式迭代、再给页面上所有p包含的文字颜色设置为red,简单粗暴的一行代码搞定简直是程序猿的最爱
jQuery核心的结构处理完毕之后基本上就可以对外使用了，但是我们知道我们是可以基于jQuery来实现插件的，包括jQuery自己可扩展性也必须要求他要对外提供一个接口方便进行二次开发，所以有了extend方法
简单的extend就是混入，列子:
<span style="font-size: 14px;">function extend(obj) {<br> var k;<br> for(k in obj) {<br> this[k] = obj[k];<br> }<br> }<br><br> Baiya.extend = extend;<br> Baiya.fn.extend = extend;<br></span>
对静态方法的和实例方法的扩展都要有，比如each方法，可以$.each来使用，也可以是$("p").each来使用
之后jQuery一些方法都是基于extend来扩展的，当然我们自己也可以基于jQuery扩展方法
DOM操作也是jQuery的一大特点，因为它太好用了，包含了我们所能想到的所有使用场景，完善了增删查改常用的方法
jQuery获取和设置类的方法如html()/css()/val()等等这些传参是设置值不传参是获取值
##链式编程
jQuery是支持链式编程的，只要你想你就可以一行代码写完所有的功能，这是怎么做到的呢
每一个改变原型链的方法都会把当前的this对象保存成他自己的属性，然后可以调用end方法找到上一级链从而方便我们可以进行链式操作
jQuery的事件操作一般可以通过click类(mouseover/mouseleave等等)和on来使用，但是click类的实现是调用on的
on的实现是对原生的onclick类的处理，因为相同的原生的事件在同一个DOM对象上只能被绑定一次，如果再次绑定会覆盖掉上一次的，所以jQuery帮我们封装了事件的存储，把相同的事件分成一个数组存储在一个对象里面，然后对数组进行遍历，依次调用数组里存储的每个方法
on实现之后会把所有的事件处理字符串处理一下用on来改造一下，如下:
<span style="font-size: 14px;">Baiya.each(("onclick,onmousedown,onmouseenter,onmouseleave," +<br> "onmousemove,onmouseout,onmouseover,onmouseup,onfocus," +<br> "onmousewheel,onkeydown,onkeypress,onkeyup,onblur").split(","), function (i, v) {<br> var event = v.slice(2);<br> Baiya.fn[event] = function (callback) {<br> return this.on(event, callback);<br> }<br> });<br></span>
jQuery也提供给了我们方便的属性操作，底层就是对原生方法的包装，处理兼容性问题，如果jQuery不对IE浏览器的兼容处理的话，那么它的代码量可能会缩一半，当然锅不能全部甩给IE，比如innerText方法火狐是不支持的，但是支持textContent方法，所以jQuery会尽可能的处理这种浏览器带来的差异
基本思想如上
Ajax可以说是前端的跨越性进步，毫不夸张的说如果没有Ajax的发展，那么今天的前端可能不叫前端，可能是美工……
Ajax是什么？
在我的理解来看Ajax就是一个方法，这个方法遵循着http协议的规范，我们可以使用这个方法来向服务器请求少量的数据，有了数据之后我们就可以操作DOM来达到局部更新网页的目的，这是一个非常酷的事情
jQuery的Ajax是基于XMLHttpRequest的封装，当然了他也有兼容性问题，具体的封装见我之前的文章 简单的ajax封装
具体就是区别get和post请求的区别，get请求的传参是直接拼接在url结尾，而post请求需要在send()里面传递，并且post请求还要设置请求头setRequestHeader("content-type", "application/x-www-form-urlencoded")
请求后对json或者text或者xml的数据进行处理就可以渲染到页面了
跨域简单的来说限制了非同源（ip/域名/端口/协议）的数据交互，当然这肯定是极好的，因为如果不限制那么你的网页别人也可以操作是不是很恐怖
但是有些情况下我们需要调用别人的服务器数据，而且别人也愿意怎么办呢，程序员是很聪明的，html标签中img，script，link等一些带有src属性的标签是可以请求外部资源的，img和link得到的数据是不可用的，只有script标签请求的数据我们可以通过函数来接收，函数的参数传递可以是任何类型，所以创建一个函数，来接收，参数就是请求到的数据，而对方的数据也要用该函数来调用就可以实现跨域了
简单封装jsonp实现
<span style="font-size: 14px;">// url是请求的接口<br>// params是传递的参数<br>// fn是回调函数<br>function jsonp(url, params, fn){<br> // cbName实现给url加上哈希，防止同一个地址请求出现缓存<br> var cbName = `jsonp_${(Math.random() * Math.random()).toString().substr(2)}`;<br> window[cbName] = function (data) {<br> fn(data);<br> // 获取数据后移除script标签<br> window.document.body.removeChild(scriptElement);<br> };<br><br> // 组合最终请求的url地址<br> var querystring = '';<br> for (var key in params) {<br> querystring += `${key}=${params[key]}&`;<br> }<br> // 告诉服务端我的回调叫什么<br> querystring += `callback=${cbName}`;<br><br> url = `${url}?${querystring}`;<br><br> // 创建一个script标签，并将src设置为url地址<br> var scriptElement = window.document.createElement('script');<br> scriptElement.src = url;<br> // appendChild(执行)<br> window.document.body.appendChild(scriptElement);<br> }<br></span>
很抱歉的是jQuery的动画源码我并没有阅读，但是我自己封装了一个动画函数，之后的源码阅读会补上的
封装的代码
<span style="font-size: 14px;">// element设置动画的DOM对象<br>// attrs设置动画的属性 object<br>// fn是回调函数<br>function animate(element, attrs, fn) {<br> //清除定时器<br> if(element.timerId) {<br> clearInterval(element.timerId);<br> }<br> element.timerId = setInterval(function () {<br> //设置开关<br> var stop = true;<br> //遍历attrs对象，获取所有属性<br> for(var k in attrs) {<br> //获取样式属性 对应的目标值<br> var target = parseInt(attrs[k]);<br> var current = 0;<br> var step = 0;<br> //判断是否是要修改透明度的属性<br> if(k === "opacity") {<br> current = parseFloat( getStyle(element, k)) * 100 || 0;<br> target = target * 100;<br> step = (target - current) / 10;<br> step = step > 0 ? Math.ceil(step) : Math.floor(step);<br> current += step;<br> element.style[k] = current / 100;<br> //兼容ie<br> element.style["filter"] = "alpha(opacity="+ current +")";<br> }else if(k === "zIndex") {<br> element.style[k] = target;<br> } else {<br> //获取任意样式属性的值，如果转换数字失败，返回为0<br> current = parseInt(getStyle(element, k)) || 0;<br> step = (target - current) / 10;<br> console.log("current:" + current + " step:" + step);<br> step = step > 0 ? Math.ceil(step) : Math.floor(step);<br> current += step;<br> //设置任意样式属性的值<br> element.style[k] = current + "px";<br> }<br> if(step !== 0) {<br> //如果有一个属性的值没有到达target ，设置为false<br> stop = false;<br> }<br><br> }<br> //如果所有属性值都到达target 停止定时器<br> if(stop) {<br> clearInterval(element.timerId);<br> //动画执行完毕 回调函数<br> if(fn) {<br> fn();<br> }<br> }<br> },30);<br> }<br><br> //获取计算后的样式的值<br> function getStyle(element, attr) {<br> //能力检测<br> if(window.getComputedStyle) {<br> return window.getComputedStyle(element, null)[attr];<br> }else{<br> return element.currentStyle[attr];<br> }<br> }<br></span>以上内容就是 jQuery 开发经验库的分享，希望能帮助到大家。
相关推荐：
위 내용은 jQuery 개발 경험 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
