8.9 JQuery

引入JQuery类库   script src   然后$符号相当于函数function jQuery(){}   即var $ = jQuery()  【jQuery   第一个小写 第二个大写】

获取元素(里面的字符串就是选择器) $(‘#box’).css({

background:"red",  width:"20px"

})

动态创建  $('<div>123</div>').appendTo('body')

$(document).ready(function(){ //当dom结构（文档）加载完成去执行这个代码块  })

缩写  $(funciton(){   })  

window.οnlοad=function({   })   当dom结构和资源加载完才执行   

这两者区别   1 前者可以执行多次  都会执行   后者会覆盖  只执行最后一个

2 前者只加载DOM结构  后者加载DOM结构和资源

jQ和JS对象互转

1 Jq转 js  通过中括号或者get方法

2 Js转Jq  只需要$(js.obj)即可   

console.log($("#box")[0])
 console.log($('#box').get(0))
console.log  ($(document.getElementById("box")))

jQ选择器示例：

 $('div:first').css('background','red')
 $('div:eq(1)').css('background','green')

ps：.css()里面如果只有一个样式，可以直接写成两个参数的形式    多个的话就必须写成对象的形式 .css({,})

jq的ajax

  $.ajax({
            url:'/login',
            type:'post',
            async:false,
            data:{username:$('.username').val()},
            success:function(){//成功了做某事},
            error:function(){//失败了做某事}

        })

js设置属性 获取属性

 var oBox = document.getElementById('box');
        oBox.setAttribute('name','peng')
        oBox.getAttribute('name')

jq

$('#box').attr('name','peng')
        $('#box').attr('name')//高版本attr可以换成prop

自定义属性和缓存数据