JQuery的页面加载事件

1. $(function(){})页面加载事件：

Jquery版本1.8与之前版本，按照顺序从上到下执行，而3.3版本以上执行顺序不定

2. 核心语法：

$(function)回调函数/$(html片段)/$(“选择器”)
如： $(function(){})页面加载事件/创建HTML标签/选择器

3.append

$(function(){
    /*$("#btn").append("<h1>测试append</h1>");*/
    var aa = $("<h1>hello world</h1>");
    $("#btn").append(aa);
    $("#btn").append("<p>我是谁</p>")
})

JQ对象.append (JQ对象) 或者 JQ对象.append (JS对象)都是可以实现的

4.在页面打印Json数据：

使用方法：

var s = JSON.stringify(res);
alert(s);

使用方法：parseInt(this)+1
在JS中，“5”-1会自动解析为5-1=4；而“5”+1会变成“51”，而不会解析。

5.JQ对象与JS对象的转换

//id选择器获得Jquery对象
var $cr = $("#cr");
//取下标获得JS对象
var cr = $cr[0];

//获取传统JS对象
Var cc = document.getElementById("cr");
//包裹JS对象组成JQ对象
Var $cc = $(cc);

6.html()，text()，val()，attr()，prop()，addClass()

1.html()方法与dom中的innerHTML操作结果一样，获取的是标签中的html内容；

2.text()方法与dom中的innerText操作的结果一样，获取的是标签中的文本内容；

3.val()方法与dom中的value操作的结果一样，获取的是标签的vlaue属性值；

4.html(),text()和val()方法如果不传入参数则为取值，如果传入参数则为赋值操作；

remove()方法：移除当前元素及其所有子元素；

empty()方法：将当前元素的所有子元素清空，保留当前元素；


属性操作：attr()
    获取属性：jq对象.attr(“name”)
    设置属性：jq对象.attr(“name”,”div1”)
    多个属性：jq对象.attr({“name”:”div1” , “id”:”lq”})

获取特殊属性：prop()：如checked、selected



Class属性操作：addClass(“textClass”)//removeClass()//toggleClass(“tex”)

class属性操作：
    addClass()：给元素添加class属性；
    removeClass()：给元素移除class属性；

css属性操作：
    css(cssName)：获取标签的css样式；
    css(cssName,cssValue)：给标签添加css样式；

7.遍历

//第一种遍历方式：jq对象方法遍历
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b1" />
//派发事件
$("#b1").click(function(){
    //通过属性过滤选中标签
    $("input[type='hidden']").each( function(index,element){
            alert(index+"==="+element.value+"===="+$(element).val()+"----"+this.value)
    })
});

//第二种遍历方式：jq全局函数遍历
//<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b2" />
    $("#b2").click(function(){
        //获取被遍历的数组
        var inps =  $("input:hidden");
        $.each(inps, function(index,element) {
            alert(index+"  "+element.value+"  "+this.value)
        });
})

//【案例】遍历数组
//<input type="button" value=" 遍历数组" id="b3" />
    var arr = [5,2,0,"传智播客"];
    $(arr).each( function(index,element){
        alert(index+"  "+element)
    })


    *       this:只在JS中存在，在JQ中没有this对象
    *
    *       在动态绑定的时候
    *       doucment.getElementById("aa").onclick = function(){
    *               this ==== 当前的标签对象
    *       }
    *
    *       在遍历的过程中：
    *       $("input[type='hidden']").each(function (index, element) {
                      this === 遍历到的当前的元素
            });


遍历：
     var arr = [5,2,0];
    方式一：jq对象对方
    jq对象.each(function(index,element){
    index: 0
    element:当前的元素
    });

    方式二：jq全局函数
    $.each(jq对象,function(index,element){
        index: 0
        element:当前的元素
    });

    方式三：使用jquery3的for of遍历：类似java代码中的foreach遍历
         $("#b3").click(function () {
             //jq全局方法遍历
             var inputs =  $("input[type='hidden']");
             for (var inp of inputs){
                 alert(inp.value);
             };
         })

8.浏览器到服务器：

实际上用户发起一个http请求，要经过很多的中间步骤才到你的服务器（例如浏览器缓存、DNS、Nginx等），服务器一般又会经过很多处理才到你写的那部分代码（路由、权限等），这整个的流程中的很多系统或者步骤，绝大部分人是不可能参与写代码的，但掌握了这些知识对你的综合水平有很大的作用。
例如：方案设计、线上故障处理这些更加有含金量的技术工作都需要综合技术水平。

“系统性”、“全局性”、“综合性”这些字眼看起来比较虚，但其实都是技术大牛的必备素质，要达到这样的境界，必须去熟悉更多的系统、业务、代码。