jQuery基础概括

jQuery

1. 普通选择器（重点掌握前三种）

1、ID选择器

格式：$("#id属性值")

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

2、类选择器

格式：$(".class属性值")

获取所有指定class属性值的元素

 

3、元素选择器

格式：$("元素名/标签名")

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

 

4、通用选择器

格式：$("*")

获取所有的元素的对象

 

5、组合选择器

格式：$("选择器1,选择器2...")

 

1. 层级选择器

1. 后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素

 

	// 后代选择器 ancestor descendant $("#parent div") var houdai = $("#parent div"); // 遍历 houdai.each(function(){

1. 子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素

 

 

	// 子代选择器 parent > child $("#parent>div") var zidai = $("#parent > div"); zidai.each(function(){ console.log(this); });

1. 相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素

 

	// 相邻选择器 prev + next $(".blue + img")  只会查询指定元素的下一个指定元素（只往下找一次元素） var xl = $("#child + p"); xl.each(function(){ console.log(this); });

1. 同辈选择器 prev ~ sibling $(".blue ~ img, div")选择css类为blue的之后的img元素

 

	// 同辈选择器 prev ~ sibling $(".blue ~ img") var tb = $(".gray ~ img"); tb.each(function(){ console.log(this); });

 

 

1. 表单选择器

表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select

 

·表单选择器 :input

查找所有的 input 元素：$(":input")；注意：会匹配所有的 input、textarea、select 和 button 元素。

·文本框选择器 :text

查找所有文本框：$(":text")

·密码框选择器 :password

查找所有密码框：$(":password")

·单选按钮选择器 :

radio查找所有单选按钮：$(":radio")

·复选框选择器 :checkbox

查找所有复选框：$(":checkbox")

·提交按钮选择器 :submit
           查找所有提交按钮：$(":submit")

 

1. 过滤选择器

 

	:checked 选择所有被选中的元素 :eq(index) 匹配指定下标的元素 :gt(index) 匹配下标大于指定值的所有元素 :odd 选择每个相隔的（奇数） 元素 :even 选择每个相隔的（偶数） 元素

1. 操作元素的属性

1. 获取属性

attr(“属性名称”) 获取指定属性，操作所有属性，返回值为

prop(“属性名称”) 返回值为true/false  只能获取固有属性，(checked、selected、disabled)

1. 设置属性值

attr(属性名称,属性值);

prop(属性名称,属性值);

1. 移除属性

removeAttr(属性名) 移除指定的属性 removeAttr('checked')

如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();

 

1. 操作元素的样式

步骤：1.获取对象-->2.操作样式

 

1. 对象名.attr(“class”) 获取class属性值，即样式名称

 

对象名.attr(“class”,”样式名”)  修改/添加 class属性

$("#conRed").attr("class","red"); ------->覆盖效果

 

1. 对象名.addClass(“样式名”)---->追加效果

$("#conRed").addClass("larger");

 

1. css()  添加到行内，优先级最高

1. 获取对象
2. 增加/修改 具体样式

对象名.css(“属性”，”属性值”)；

1. 获取样式

对象名.css(“属性”);---->返回属性的具体值

1. 引入Jason（）对象

对象名.css({“border”：”solid  1px  red” , “width”:”30px”,”height”:”300px” })

这种方式引入样式，不需要一条条添加属性，方便快捷

 

1. 操作元素内容

1. 非表单元素内容

 

html() 获取元素的html内容

html("html,内容") 设定元素的html内容

text() 获取元素的文本内容，不包含html标签

text("text 内容") 设置元素的文本内容，不包含html标签

 

1. 表单元素内容

 

val() 获取元素value值

val(‘值’) 设定元素的value值

 

1. 操作文档结构

1.内部插入

1. 1. append(“内容”)  在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记、jQuery对象。

$(“div”).append(“haha”);追加一个haha

1. 1. appendTo（元素对象或者选择器） 将指定的元素对象追加到对象的内容

将指定的元素对象追加到另一个、指定的元素集合/对象的内部的尾部

 

$(“p”).appendTo $(“div”),

 

1. 1. prepend（“内容”）将指定的内容追加到对象的内部的首位

div.prepend(“11”);

1. 1. prependTo（元素对象或者选择器）将指定的元素对象追加到另一个、指定的元素集合/对象的内部的首位
2. 外部插入
   1. 1. after(“内容”); 将指定的内容追加到指定的元素后面
         1. 对象名.after(“XXX”) 将XXX添加到对象的外部后面
         2. 获取对象
         3. before(“内容”) 将指定的内容追加到指定的元素前面
         4. insertAfter(“元素对象”);
         5. insertBefore(); 把所有匹配的元素插到另一个、指定的元素集合的前面

 

1. 创建元素

$("元素内容")

 

1. 删除元素
   1. 1. 1. remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
         2. empty() 清空所选元素的内容，结构还在

 

1. 遍历元素

each()

$(selector).each(function(index,element)) {

 

}:遍历元素

 

function 为遍历时的函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

 

1. 加载事件

ready()加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行，不会覆盖

$(document).ready(function(){加载完毕后的函数}) 等价于 $(function(){})

 

onload与ready()的区别：

1、ready()在DOM结构解析完毕后即执行

2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行

1. 事件

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

 

一、js绑定事件 /*document.getElementById("btn").onclick = function(){ alert('这是个按钮。。。');};*/   二、bind()绑定事件 /*$("#btn").bind("click",function(){ alert('这是个按钮。。。');});*/   三、直接绑定事件 $("#btn").click(function(){ alert('这是个按钮。。。');});   多个绑定事件：一个对象行为绑定多个事件   JQ对象.事件1(function(){...}).事件2(function(){...});-------->直接绑定。。。多个事件 JQ对象.bind(“事件1”，fn1).bind(“事件2”，fn1); JQ对象.bind({“事件1”：fn1, ”事件2”：fn2 }); ------------->jason 对象引入