jQuery与原生JS：入口函数、DOM操作与Ajax详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_44247511/article/details/120881732

入口函数、ajax、jsonp

《入口函数 优缺点》
原生js 会等到DOM元素加载完毕，并且 元素中的 src 也加载完毕才会执行
JQuery 入口函数  $(document).ready(function(){ }) 和  $(function(){ })    $代表 jQuery
jQuery 会等到DOMTree 解析完毕就执行（也就是 浏览器知道DOM元素的你是个啥就好 不用知道你具体是啥）  不会等到所有的DOM 元素解析加载完成时 执行

《jq和js转换 为什么转换》
如何转换：
1、js对象转换成jquery对象。 $(js对象);
2、jquery对象转换成js对象。 (1)jquery对象[索引值] (2)jquery对象.get(索引值)

为什么转换：
jQuery中$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象
jQuery这个js库，除了$之外，还提供了另外一个函数：jQuery
jQuery函数跟$函数的关系：jQuery ===$;

jq对象和dom对象的区别
DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象;


选择器 及作用
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素


jq的事件加载
① $(document).ready(function处理);
② $().ready(function处理);
③ $(function处理);  对第一种加载的封装而已
在同一个请求里边，jquery的可以设置多个，而传统方式只能设置一个
传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边，成为数组的元素，执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。
传统方式加载事件，是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
jquery方式加载事件，只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。


链式编程 解决断链问题
优点： 连贯，语意集中，增强代码可读性。
缺点： 不利于调试。
断链处加.end()返回初始的对象继续进行编程


获取兄弟，父元素
siblings()
parents()


动画效果及参数
$(selector).animate(styles,speed,easing,callback)
speed 可选。规定动画的速度。默认是 "normal"。
可能的值：毫秒 （比如 1500）"slow""normal""fast"easing
可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数：swinglinear扩展插件中提供更多 easing 函数。
callback   可选。animate 函数执行完之后，要执行的函数。


停止动画.stop()
stop(a,b);
 参数a和b都是可选参数，为Boolean值（true或false）。a代表是否清空未执行完的动画队列，b代表是否直接将正在执行的动画跳转到末状态。


删除元素(3种)
remove() 从DOM中移除匹配的元素及其所有的后代和文本节点。
detach() 从DOM中移除匹配的元素及其所有的后代和文本节点。还会在内存中保留副本。通常使用remove()方法。
empty()     从DOM中移除匹配元素子节点及后代。
unwrap() 移除匹配子节点及其后代。


keycode 键盘编码
可以触发所对应的键盘事件
每个按键都有所对应的keycode码，可以实现按对应的键触发对应的函数


过滤选择器
$(‘p:first’)选取页面元素内的第一个p元素
$(‘p:last’)选取页面元素内的最后一个p元素
$(‘p:not(.select)’)选取选择器不是select的p元素
$(‘p:even’)选取索引是偶数的P元素(索引从0开始)
$(‘p:odd’)选取索引是奇数的p元素(索引从0开始)
$(‘p:eq(index)’)选取索引等于index的p元素(索引从0开始,索引支持负数)
$(‘p:gt(index)’)选取索引>index的p元素(索引从0开始)
$(‘p:lt(index)’)选取索引<index的p元素(索引从0开始)
$(‘:header’)选取标题元素h1~h6
$(‘:animated’)选取正在执行动画的元素
$(‘input:focus’)选取当前被焦点的元素
eq(index)获取是index索引值的元素(索引从0开始,负值从后开始)
first()选取第一个元素
last()选取最后一个元素
not(select)选取不是该选择器的元素


为元素绑定多个事件 1.链式编程 2.bing() 3.on()
$(".aa").on("click",function(){
        alert(1)
    }).on("mousemove",function(){
        console.log(1);
    });
$(".aa").on({click:function(){
        alert(1)
    },mousemove:function(){
        console.log(2);
    }})


子级委托父级绑定事件
$('ul').on('click','li',function(){ //给li的父标签绑定委托事件
      alert($(this).text());//点击时候弹出JQ获取li里文本内容的
      alert(this.innerHTML);
      JS里获取里文本内容的方法
    console.log(this);
    });
     $('ul').off('click','li');
    $('input').bind('click',function(){
      $('li:first').before('<li>冬</li>');
    });


对象方式绑定多个相同事件，只会运行最后一个


解绑事件 对应的 off()
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。
off()函数主要用于解除由on()函数绑定的事件处理函数
jQueryObject.off( [ a [, c ] [, d ] ] )
jQueryObject.off( b [, c ] )
a
可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。

b
Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。

c
可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。

d
可选/Function类型指定的事件处理函数。


懒加载原理 滚动条距离图片的距离
先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" data-src="xxx" />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。


防抖动 节流
防抖 debounce 简单来说就是防止抖动
当持续触发事件时 debounce 会合并事件且不会去触发事件，当一定时间内没有触发在这个事件时，才真正去触发事件。
立即执行的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

throttle(节流),当持续触发事件时，保证隔间时间触发一次事件
持续触发事件时,throttle会合并一定时间内的事件,并在该时间结束时真正去触发


each遍历
each() 方法规定为每个匹配元素规定运行的函数。
$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});
返回 false 可用于及早停止循环。


$让权
var jq=$.noConflict();
noConflict() 方法让渡变量 $ 的 jQuery 控制权。
该方法释放 jQuery 对 $ 变量的控制。
该方法也可用于为 jQuery 变量规定新的自定义名称。
提示：在其他 JavaScript 库为其函数使用 $ 时，该方法很有用。
jQuery.noConflict(removeAll)


只创建一个元素
$("#btn").toggle(function(){
      控制box隐藏
      $("#box").appendchild();
},function(){
      控制box显示
      $("#box").removechild();
});


请求响应流程
客户端通过随机端口与服务端某个固定端口（一般为80）建立连接 三次握手
客户端通过这个连接发送请求到服务端（这里的请求是名词）
服务端监听端口得到的客户端发送过来的请求
服务端通过连接响应给客户端状态和内容


动态网站和静态网站的区别
静态页面是不能随时改动的，静态是一次性写好放在服务器上进行浏览的，如果想改动，必须在页面上修改，然后再上传服务器覆盖原来的页面，这样才能更新信息，比较麻烦，使用者不能随时修改。

动态页面是可以随时改变内容的，有前后台之分，管理员可以在后台随时更新网站的内容，前台页面的内容也会随之更新，比较简单易学。


超全局变量
PHP 中的许多预定义变量都是“超全局的”，这意味着它们在一个脚本的全部作用域中都可用。在函数或方法中无需执行 global $variable; 就可以访问它们。
这些超全局变量是：$GLOBALS,$_SERVER,$_REQUEST,$_POST,$_GET,$_FILES,$_ENV,$_COOKIE,$_SESSION


《ajax请求步骤》
    1.创建ajax对象
    2.准备发送数据
    3.执行发送数据
    4.指定回调函数

《ajax回调函数的具体步骤 各数值代表的含义》
    一.xhr.onreadystatechange
    二.xhr.readyState == 4
    三.xhr.status == 200
同步和异步的含义

jsonp原理

JSONP 核心原理
script 标签不受同源策略影响。
动态插入到 DOM 中的 script 脚本可以立即得到执行。
《ajax的作用》
1.显示新的html内容，而不用载入整个页面
2.提交一个表单，并且立即显示结果
3.登录而不用跳转到另一个页面
《get和post提交的区别》
get的请求参数是在url中传递，需要注意编码问题
post的请求参数是在请求体中传递，需要设置请求头信息
1.客户端创建一个 JavaScript 函数，用来接收服务端返回的数据。

function onResponse(data) {
    // do something
}

2.客户端动态插入 script 标签执行请求。

var script = document.createElement('script')
script.src = 'protocal://domain:port/path?callback=onResponse'
document.head.appendChild(script)
document.head.removeChild(script)

3.服务端将数据和 js 回调函数名拼接为函数调用的字符串并返回给客户端。

app.get('/path', function(request, response) {
    var data = getData()
    var callback = request.query.callback
    var result = `${callback}(${JSON.stringify(data)});`
    response.send(result)
})