jquery $.post 超时_jQuery

一．安装jQuery

1、下载Jquery的js文件

2、在需要使用jquery的文件中引入js文件

$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。

通过该对象可以获取 jQuery 对象，调用 jQuery 提供的方法等。

注：只有 jQuery 对象才能调用 jQuery 提供的方法。

二．DOM对象与Jquery包装集包装集

1.报错

Uncaught ReferenceError: $ is not defined 报错原因：

1、没有引入jquery文件

2、引入的jquery文件顺序不对

2.得到DOM对象

console.log(document.getElementById("mydiv1"));

3.得到Jquery包装集对象

DOM对象转 Jqyery包装集对象

将DOM对象放到$()括号中

console.log($("#mydiv1"));

选择器

层次选择器（Hierarchy）

后代选择器（ancestor descendant）

$("#parent div")选择 id 为 parent 的元素的所有 div 元素

子代选择器（parent > child ）

$("#parent>div")选择 id 为 parent 的直接 div 子元素

相邻选择器（prev + next）

$(".blue + img")选择 css 类为 blue 的下一个 img 元素

同辈选择器（prev ~ sibling）

$(".blue ~ img")选择 css 类为 blue 的之后的 img 元素

基础选择器（Basics）

id 选择器 （#id）

$("#testDiv")选择 id 为 testDiv 的元素（id属性值）

元素名称选择器（element）

$("div")选择所有 div 元素 （元素名称）

类选择器（.class）

$(".blue")选择所有 class=blue 的元素 （class属性值）

选择所有元素（*）

$("*")选择页面所有元素

组合选择器 （selector1,selector2,selectorN）

$("#testDiv,span,.blue")同时选中这几个选择器匹配的元素

、

表单选择器

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

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

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

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

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

图像域选择器 :image 查找所有图像域：$(":image")

重置按钮选择器 :reset 查找所有重置按钮：$(":reset")

按钮选择器 :button 查找所有按钮：$(":button")

文件域选择器 :file 查找所有文件域：$(":file")

过滤选择器

:checked:得到所有checked为true的元素

:eq(index):匹配指定下标的元素

:gt(index):大于指定下标的

:odd 获取所有的奇数位置的元素

:even 获取所有的偶数位置的元素

jQuery DOM 操作

1.操作元素的属性

（1）获取属性

attr(属性名称)

获取指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined。 attr('checked')attr('name')

prop(属性名称)

获取具有 true 和 false 两个属性的属性值prop('checked')

（2）设置属性

attr("属性名","属性值")

prop("属性名","属性值")

（3）移除属性

removeAttr("属性名")

attr()与prop()的区别：

共同点：

都可以获取元素的属性

不同点：

1、attr()可以获取自定义属性和固有属性的值，而prop()只能获取固有属性的值 （固有属性：元素本身就有的属性）

2、操作返回值是boolean类型的属性时，attr()返回的是对应的值，而prop()返回的是true和false

如何选择：

如果属性的返回值是boolean类型时，用prop()方法； （checked、selected、disabled）

如果是非boolean类型，则使用attr()方法

操作元素样式

（1）方法

attr(“class”) 获取 class 属性的值，即样式名称

attr(“class”,”样式名”) 修改 class 属性的值，修改样式

addClass(“样式名”) 添加样式名称

css() 添加具体的样式

removeClass(class) 移除样式名称

（2）增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})

例：css({"background-color":"red","color":"#fff"})2）css(“样式名”,”样式值”)

例：css('color','white')

2）css(“样式名”,”样式值”)

例：css('color','white')

attr():设置样式时，会重新设置class的属性值，所以会将原来的样式覆盖

addClass():添加样式，原来的样式依然保留，如果出现了相同样式，以后定义的样式为准

css():设置具体的样式（设置行内样式，写在style属性中的样式）

操作元素的内容

（1）方法

html() 获取元素的 html 内容

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

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

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

val() 获取元素 value 值

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

（2）html()和text()

html()可以识别数据中的html标签并 显示出来；

text()不识别html标签，会当做纯文本显示

取值时，html()能够获取到元素中的html代码，text()只会获取纯文本

表单元素：取值赋值使用 val()

文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、（按钮）等

非表单元素：取值赋值使用 html()和text()

div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

创建元素

$(‘元素内容’)

添加元素

prepend(content)

在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).prependTo(selector)

把 content 元素或内容加入 selector 元素开头

append(content)

在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

$(content).appendTo(sector)

把 content 元素或内容插入 selector 元素内，默认是在尾部

before()

在元素前插入指定的元素或内容:$(selector).before(content)

after()

在元素后插入指定的元素或内容:$(selector).after(content)

删除元素

remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。

empty() 清空所选元素的内容

遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

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

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

Jquery 事件

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

获取元素

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

第一个参数：事件的类型

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

第二个参数：函数

1.ready()加载事件

（1）方法

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

（2）ready()加载事件和onload加载事件：

ready()加载事件在dom结构（htm标签）加载完毕后，就执行

onload加载事件在dom结构（htm标签）及引入的外部资源（js文件、css文件等）加载完毕之后才执行

2.bind()绑定元素事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject))

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可

以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click,

dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,

mouseleave,change, select, submit, keydown, keypress, keyup, error [, eventData]：传递的参数，格式：{名:值,名 2:值 2}

handler(eventObject)：该事件触发执行的函数