jQuery基础

jQuery $

    注意：先引入文件，再用
    ready方法：  jQuery已经准备好 可以使用

$(function(){})
jQuery(function(){})
$(document).ready(function(){})
jQuery(document).ready(function(){})

---

window.onload与jQuery的ready方法

区别：
window.onload（会相互覆盖）只能出现一次 后写会覆盖先写的
jQuery的ready （不会相互覆盖）
哪个先执行？（ready方法）
window.onload
页面中所有元素（DOM，外联css，外部的js，图片）加载完才会触发onload事件
jQuery的ready
更快 DOMContentLoaded
只要DOM加载完就会触发

---

核心优势

强大的选择器 $(‘CSS选择器’) 选中的是所有的匹配元素 自带遍历
链式操作（.）

---

选择器

$('div')  标签选择器
$('.box')  class选择器
$('#id')   id选择器
$('#bar div') 后代选择器
$('#var>div') 子代选择器
$('#bar div, .box') 多重选择器

css事件

$('div:first').css('background','#f00') //第一个
$('div:last').css('background','#f00')//最后一个
$('div:even').css('color','#00f')//偶数个
$('div:odd').css('color','#0ff')//奇数个
$('div:eq(2)').css('background','#f0f') //第几个

DOM对象与JQ对象

注意：
text() -> innerText
html() -> innerHTML

JQ对象只能使用JQ里的方法
DOM元素也不能直接使用JQ的方法
$('div:first') JQ选择器 拿到的是个jQuery对象
               并不是DOM元素
               不能直接操作DOM 的属性与方法

转换
JQ对象 -> DOM对象
JQ对象[索引]
DOM对象 -> JQ对象
$(DOM对象)
JQ对象
JQ对象.html()
不传参数获取 传参数设置
JQ对象.text()
不传参数获取 传参数设置

css使用方法：
JQ对象.css(‘属性名’,’属性值’)
JQ对象.css({
‘属性名’: ‘属性值’,
‘属性名’: ‘属性值’,
‘属性名’: ‘属性值’ //属性值 写单位的话，需要加上引号
})

JQ对象.事件名(function(){
//do something …
})
事件名 是不带on的

    JQ对象.hover(function(){
        //鼠标移入
    },function(){
        //鼠标移出
    })

    toggle 已经 废除
    JQ对象.toggle(function(){
        //点第一次
    },function(){
        //点第二次
    })
    JQ对象.val()  获取控件的value值
    JQ对象.val(value值)   设置控件的value值
    JQ对象.attr('属性名')
    JQ对象.attr('属性名') 获取第一个匹配的
    JQ对象.attr('属性名','属性值') 设置 设置所有匹配的项
    JQ对象.removeAttr('属性名') 删除属性 删除所有匹配的项
    JQ对象.prop('属性名') 
    JQ对象.prop('属性名','属性值')
    JQ对象.removeProp('属性名')
    JQ对象.toggleClass('class名')
        切换class 有就去掉 没有就添上
    JQ对象.offset()  获取相对于文档的位置
    返回：{left: ,top: }

    JQ对象.position()
    获取距离它最近的有定位的上级元素的位置

    JQ对象.wiidth(),JQ对象.height()
    获取宽高
    写参数就是 设置宽高

    JQ对象.innerWiidth(),JQ对象.innerHeight()
    获取尺寸 包含padding

    JQ对象.outerWiidth(),JQ对象.outerHeight()
    获取尺寸 包含padding和border

    JQ对象.outerWiidth(true),JQ对象.outerHeight(true)
    $(window).scroll(function(){
        console.log($(this).scrollTop());
    })