一小时快速上手jQuery

• • jQuery对象
  • jQuery选择器
  • • 基础选择器
    • • id选择器
      • 元素名称选择器
      • 类选择器
      • 通用选择器
      • 组合选择器
    • 层次选择器
    • • 后代选择器
      • 子代选择器
      • 相邻选择器
      • 同辈选择器
    • 表单选择器
    • • 表单选择器
      • 文本选择器
      • 密码框选择器
      • 单选按钮选择器
      • 复选框选择器
      • 提交按钮选择器
      • 图像域选择器
      • 重置按钮选择器
      • 按扭选择器
      • 文件域选择器
  • 操作元素的属性
  • • 属性的分类
    • 获取属性
    • 设置属性
    • 移除属性
  • 操作元素的样式
  • 操作元素的内容
  • 创建元素
  • 添加元素
  • 删除元素
  • 遍历元素
  • jQuery事件
  • • ready加载事件
    • bind()绑定事件
  • jQuery Ajax
  • • $.ajax
    • $.get
    • $.post
    • $.getJSON

此教程注重理论知识部分，实践部分后期会更新（结合我的毕业设计！！！）

jQuery对象

Dom对象

• 通过js方式获取的元素对象

jQuery对象

• 通过jQuery方法获取的元素对象，返回的是jQuery的包装集

使用jQuery时一定要在首部先引入jQuery文件

Dom对象转jQuery对象

• 只需用$包括起来即可

  var Domdiv=document.getElementById("div");
  var divjQuery=$(Domdiv);
  

jQuery对象转Dom对象

• 获取包装集指定下标的元素即可

  var div=divjQuery[0];
  

jQuery选择器

基础选择器

id选择器

var div=$("#div");//选择指定id的元素对象

元素名称选择器

var div=$("div");//选择指定标签的元素对象

类选择器

var div=$(".div");//选择指定class的元素对象

通用选择器

var all=$("*");//选择所有元素对象

组合选择器

var divs=$("#div1,#div2,#div3");//选择指定选择器的元素对象

层次选择器

后代选择器

var div=$("#parent div");//选择id为parent的父元素的所有（包含第一代，第二代等）div元素

子代选择器

var div=$("#parent>div");//选择id为parent的直接（第一代）div子元素

相邻选择器

var div=$(".parent+div");//选择css类为parent的下一个div元素（只会查找下一个元素，如果元素不存在，则获取不到）

同辈选择器

var div=$(".parent~div");//选择css类为parent的之后的div元素（选择元素下面的所有指定元素）

表单选择器

表单选择器

$(":input");//查找所有input元素

文本选择器

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

密码框选择器

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

单选按钮选择器

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

复选框选择器

$(":checkbox");//查找所有复选按钮

提交按钮选择器

$(":submit");//查找所有提交按钮

图像域选择器

$(":image");//查找所有图像域

重置按钮选择器

$(":reset");//查找所有重置按钮

按扭选择器

$(":button");//查找所有按钮

文件域选择器

$(":file");//查找所有文件域

操作元素的属性

属性的分类

固有属性:id,name,class,style

返回值时boolean的属性:checked,selected,disabled

自定义属性:用户自己定义的属性

如果属性的类型是boolean，则使用prop()方法，否则使用attr()方法

获取属性

attr("属性名");
prop("属性名");

区别

• 如果是固有属性，attr()和prop()方法均可获取
• 如果是自定义属性，attr()可获取，prop()不可获取
• 如果是返回值是boolean类型的属性
  • 若设置了属性，attr()返回具体的值，prop()返回true
  • 若未设置属性，attr()返回undefined，prop()返回false

设置属性

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

移除属性

removeAttr("属性名");

操作元素的样式

attr("class");//获取元素的样式名
attr("class","样式名");//设置元素的样式,原本的样式会被覆盖
addClass("样式名");//添加样式,原本样式保留，出现相同样式，以后定义的为准
css();//添加具体的样式(行内样式)
//css("具体样式名","样式值")
//css({"具体样式名":"样式值","具体样式名":"样式值"})
removeClass("样式名");//移除样式

操作元素的内容

html()//获取元素的内容，包含html标签（非表单元素）
html("内容")//设置元素的内容，包含html标签（非表单元素）
text()//获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容")//设置元素的纯文本内容，不识别HTML标签（非表单元素）
val()// 获取元素的值(表单元素)
val("值")// 设置元素的值(表单元素)

创建元素

$("
添加元素
");

添加元素

prepend(content);//在被选元素内部的开头插入元素或内容，被追加的content参数。可以是字符，HTML元素标记
$(content).prependTo(selector);//把content元素或内容加入selector元素内部开头
append(content);//在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符，HTML元素标记
$(content).appendTo(selector);//把content元素或内容插入selector元素内，默认是在尾部
before();//在元素前插入指定的元素或内容:$(selector).before(content)
after();//在元素后插入指定的元素或内容:$(selector).after(content)

在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置

如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

删除元素

var div=$("div");
div.remove();//删除所选元素或指定的子元素，包括整个标签和内容一起删
div.empty();//清空所选元素的内容,保留标签

遍历元素

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

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

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

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

1
2
3
4

jQuery事件

ready加载事件

• 预加载事件
• 当页面的dom结构加载完毕后执行
• 类似于js中的load事件
• ready事件可以写多个

主要为了解决HTML顺序执行的特性

文本

$(document).ready(fuction(){console.log($("div")); });
//简写 
$(function(){console.log($("div"));
});

bind()绑定事件

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

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

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

[, eventData]：传递的参数，格式：{名：值，名2：值2}

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

• 绑定单个事件

  • bind绑定

    $(“元素”).bind(“事件类型”,function(){

    });

  • 直接绑定

    $(“元素”).事件名(function(){

    });

• 绑定多个事件

  • bind绑定

    • 同时为多个事件绑定同一个函数

      指定元素.bind(“事件类型1 事件类型2 事件类型3”,function(){

      });

    • 为元素绑定多个事件，并设置对应的函数

      指定元素.bind(“事件类型1”,function(){

      }).bind(“事件类型2”,function(){

      });

    • 为元素绑定多个事件，并设置对应的函数

      指定元素.bind({

      “事件类型”:function(){

      },

      “事件类型”:function(){

      }

      });

  • 直接绑定

    指定元素.事件名(function(){

    }).事件名(function(){

    });

jQuery Ajax

一种异步无刷新技术

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, .post等。.post 等。.post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

$.ajax

jquery调用ajax用法：

格式：$.ajax({});

参数：

​ type:请求方式GET/POST

​ url:请求地址url

​ async:是否异步，默认是true表示异步

​ data:发送到服务器的数据

​ dataType:预期服务器返回的数据类型

​ contentType:设置请求开头

​ success:请求成功时调用此函数

​ error:请求失败时调用此函数

data.json

[{"userId":1,"userName":"zhangsan","userAge":18},{"userId":2,"userName":"lisi","userAge":19},{"userId":3,"userName":"wangwu","userAge":20},{"userId":4,"userName":"zhaoliu","userAge":21}
]

查询数据

$.get

简单的GET请求功能以取代复杂$.ajax

失败时没有调回函数

$.get(“请求地址”,“请求参数”,function(形参){

});

$.get("data.json",{},function(data){console.log(data);
})

$.post

$.post(“请求地址”,“请求参数”,function(形参){

});

$.post("data.json",{},function(data){console.log(data);
})

$.getJSON

$.getJSON(“请求地址”,“请求参数”,function(形参){

});

getJSON方式要求返回的数据格式满足json格式(json字符串)如果返回的数据不是json格式的，则无法获取

$.getJSON("data.json",{},function(data){console.log(data);
})