jquery（1）

一、jQuery 是一个js的类库。

​ write less  do more;

---

二、js原生aip封装：

function get(partten){

if(partten以#打头){

return document.getElementById("id值");

}else if(partten以.打头){

return document.getElementsByClassName("标签的class属性名字")

}

}

---

三、dom和jquery相互转换：

原生的dom对象

就是调用原生的api 获取元素 称之为原生的dom对象

jquery对象

使用jquery的方法 获取的元素而是一个经过封装的对象

jquery对象-->dom对象

var dom对象=jquery[数字类型的属性名];

dom对象-->jquery对象

var jquery对象=$(dom对象);

var $jquery对象=$(dom对象);

往用jquery获取的元素 前面加$的前缀也可以

---

四、页面加载：

原本的onload加载会覆盖前面的

//原生api  使用页面加载完成

onload=function(){

alert("同事1写的逻辑")

}

onload=function(){

alert("同事2写的逻辑")

}

/////////////////////////////////////////////////////

方式一

$(document).ready(function(){

js逻辑

})

方式二

$(function(){

js逻辑

})

---

五、事件绑定:

原生的：

方式一

方式二:

document.getElementById("x").onclick=function(){

...

}

jquery封装好的:

$("选择器").click(function(){

....

})

---

六、常见事件：

$(document).ready(function(){

$("#e01").blur(function(){

$("#textMsg").html("文本框失去焦点：blur");

}).focus(function(){

$("#textMsg").html("文本框获得焦点：focus");

}).keydown(function(){

$("#textMsg").append("键盘按下：keydown");

}).keypress(function(event){

$("#textMsg").append("键盘按：keypress");

}).keyup(function(){

$("#textMsg").append("键盘弹起：keyup");

});

var i=0;

$("#e02").mouseover(function(){

$("#divMsg").html("鼠标移上：mouseover");

}).mousemove(function(){

$("#divMsg").html("鼠标移动：mousemove,"+ i++);

}).mouseout(function(){

$("#divMsg").html("鼠标移出：mouseout");

}).mousedown(function(){

$("#divMsg").html("鼠标按下：mousedown");

}).mouseup(function(){

$("#divMsg").html("鼠标弹起：mouseup");

});

$("#e03").click(function(){

$("#buttonMsg").html("单击：click");

}).dblclick(function(){

$("#buttonMsg").html("双击：dblclick");

});

});

---

七、效果：

回调函数：把一个方法作为参数 传给了另外一个方法

$("#b1Div").toggle(2000,function(){               

     alert("xxx方法执行了...")

});

隐藏与显示

        $("选择器").hide(毫秒值);

        $("选择器").show(毫秒值)

        $("选择器").toggle(毫秒值)

滑入和滑出

        slideUp(毫秒值)

        slideDown(毫秒值)

        slideToggle(毫秒值);

淡入和淡出

        fadeIn()

        fadeOut()

        fadeToggle();

---

八、jquery选择器：

id选择器 #id

class选择器 .class的名字

标签选择器 标签的名字

所有选择器  *

分组选择器 选择器1,选择器2.....

属性选择器 [属性名='属性值']

---

层级选择器:

    a b :a选择器中的b 孩子们(孙子辈)

    a>b :a选择器中的b 儿子们

    a+b :a的b的大弟弟(第一个)

    a~b :a的b的弟弟们

---

过滤选择器:

        :first

        :last

        :eq(index)

        :lt(index) less than 小于

        :gt(index) greate than 大于

        :odd 奇数

        :even 偶数

内容过滤选择器：

        父选择器:has(子选择器);

---

属性选择器：

    $("div[title]") 含有属性

    $("div[title='test']") 属性值等于

    $("div[title^='t']") 属性值以x打头

    [title$='t'] 属性值以x结尾

    [title*='t'] 属性值包含x

---

表单选择器:

:text 选中普通文本输入框

:radio 选中的就是单选框

:input 选中所有form的子标签 input textarea select button

input 标签选择器

---

九、改变元素：

attr("属性名")//获取

attr("属性名","属性值")//设置

css("属性名")//获取

css("属性名","属性值")//设置

addClass 只操作class属性

removeClass 只删除class属性