jQuery语法相关

jQuery语法小结

两个关键

jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

get(0) 问题

get()：将jq获取的元素转成js原生的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: black;
            margin: 0 auto;
        }
    </style>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <div></div>
    <script>
        //jq中的get问题 这里所说的get不是ajax里的get
        //get() 将jq获取的元素转成js原生的元素
        //问题：为什么在用get的时候，需要写参数0 
        console.log($('div').get(0).offsetWidth) //100
        console.log($('div').get().offsetWidth) //undefined
        //我们可以将$('div').get() 输出一下看看
        console.log($('div').get()); //div的数组
    </script>
</body>
</html>

运行结果

ajax

什么是ajax

AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

XMLhttprequest对象

Ajax的核心是JavaScript对象XmlHttpRequest。，它是一种支持异步请求的技术。简而言之，XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新

xhr常用方法和属性

方法
- open()(String method,String url,boolean asynch,String username,String password)：该方法创建http请求
- 第一个参数是指定提交方式(post、get)
- 第二个参数是指定要提交的地址是哪
- 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
- 第四和第五参数在http认证的时候会用到。是可选的
- setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）
- send(content)：发送请求给服务器
属性
- onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
- readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
  - 0：未初始化
  - 1：open方法成功调用以后
  - 2：服务器已经应答客户端的请求
  - 3：交互中。Http头信息已经接收，响应数据尚未接收。
  - 4：完成。数据接收完成
- responseText：服务器返回的文本内容
- responseXML：服务器返回的兼容DOM的XML内容
- status：服务器返回的状态码
- statusText：服务器返回状态码的文本信息

Ajax怎么解决浏览器缓存问题

在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)。
在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”)。
在URL后面加上一个随机数： “fresh=” + Math.random();。
在URL后面加上时间戳：”nowtime=” + new Date().getTime();。
如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

JS同源策略

同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。

同源定义:

如果两个页面拥有相同的 协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）。

下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同
http://news.company.com/dir/other.html	失败	主机名不同