一、Jquery

1.Jquery的导入

下载Jquery,script标签导入

    <script src = "Jquery方法位置"

    type="text/jquary" charset="UTF-8">

2.Jquery和Dom的转换

Dom对象中只有有限的属性和方法,而使用Jquery方法需要转换为Jquery对象

美元符号代替Jquery对象

$就可以替代Jquery

Dom转Jquery对象

var Jquery对象名 = $("Dom对象名")

Jquery对象转Dom对象

方法1

var Dom对象名=$("Jquery对象名")

方法2 用数组方法获取第一个

var Dom对象名=Jquery数组[0]

方法3 利用each方法,Jquery独有方法,遍历方法

Jquery对象名.each(){

    对象名 = this;

}

3.jquery选择器

1.基础选择器

id选择器

获取指定id值的对象(只会获取到第一个id值)

元素选择器

获取所有指定标签名的元素

类选择器

获取所有该类名的元素

选择所有

获取所有元素的对象

组合选择器

组合前3个选择器

选择器写法

id选择器$("#id")

元素选择器$("元素名")

类选择器$(".class属性")

选择所有$("*")

组合选择器$("选择器1","选择器2")

2.层次选择器

后代选择器

var houdai = $("#parent div");

子代选择器

var zidai =$("#parent>div")

相邻选择器

var xiangling = $("#parent+div")

同辈选择器

var tongbei=$(".gray~img");

3.表单选择器

表单选择器

文本框选择器

密码框选择器

单选按钮选择器

复选框选择器

提交按钮选择器

图像域选择器

重置按钮选择器

按钮选择器

文件域选择器

4.其他选择器

过滤选择器

var checkboxs = $(":checkbox");

过滤被选中的

var ckeckeds = $(":checkbox:checked");

匹配指定下标的元素

var second = $(":checkbox:eq(1)");

匹配所有下标大于指定值的元素

var gt = $(":checkbox:gt(0)");

取奇数

var odds =$(":checkbox:odd");

取偶数

var odds =$(":checkbox:even");

4.Jquery dom操作

4.1操作元素的属性

attr

获取指定的属性值

prop

获取具有true和false 的两个属性的属性值

如果返回值是true或false(checked、selected、disabled)

设置属性的值

attr(元素,要修改的内容)

移除属性

removeAttr(元素)

4.2操作元素的样式

attr:设置元素的class属性

如果存在则覆盖

如果不存在就添加

addClass

添加样式,原来的样式保留 

css

添加一个具体样式css("样式名","样式值")

同时添加多个样式名({"样式名":"样式值","样式名":"样式值"})

4.3操作元素的内容

html

html识别标签

text

text不识别标签

val

val主要用来修改表单内容

4.4创建元素

$('元素内容')

$('

这是一个p

')

4.5添加元素

prepend()

append()

before()

after()

4.6删除元素

remove

remove可以删除元素

empty

empty清除内容

4.7遍历元素

$(".green").each(index,element){

console.log(index);

console.log(element);

console.log(element.innerHTML);

console.log($(element).html())

};

5.Jquery事件

5.1ready()加载事件

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

$(function(){})

5.2bind()绑定事件

绑定单个事件

bind()绑定事件

$("btn").bind("click",function(){

    事件内容;

})

直接绑定事件

$("btn").click(function(){

    事件内容;

});

多个事件绑定一种行为

bind()绑定事件

$("#txt").bind({

    focus:function(){

        事件内容;

    },

    blur:function(){

        事件内容;

    }

})

多个事件

$("#txt").focus(function(){

    $("#txt").val("");

}).blur(function(){

    $("#txt").val("你好");

});