Jquery知识点笔记

• 1.页面加载完成之后，再来执行script代码，jQuery怎么实现 在JavaScript代码中一般写为

window.onload = function(){
xxxxxxx
}
在jquery中
$(function(){
xxxxxxx
})
或者
$(document).ready(function(){
    xxxxxxx
})

• 2.Jquery和dom对象的相互转换

```bash
> $(“jequery选择器”)---》得到的是jQuery对象 $(dom对象)----》得到的是一个jquery对象
> $(“jQuery选择器”)[0] 或者 $(“jQuery选择器”).get(0)可以将获取到的一个jQuery对象转换为dom对象。
> Dom对象获取value值，通过dom对象自带的属性，dom对象.value。
> jQuery对象获取value值，通过jquery对象自带的方法获取，jQuery对象.val()。

> 3.Jquery选择器有哪些

```bash
基本选择器：
类选择器$(“.class值”)，
id选择器$(“#id值”)，
标签选择器$(“标签名称”)，
所有选择器$(“*”)，
组合选择器$(“.class值, #id值, 标签名”)---》得到相应jquery对象

表单选择器
$(“:此处写input表单项里的type值，如：radio，checked，text，password。。。”)
（得到的是相应type值下的所有对象）

 - 4.jQuery的过滤器:将通过选择器选出来的一些dom对象，再进一步的筛选。

```bash
jQuery过滤器分为：（总是要用在选出对象只用，使用过滤器）“内容写成字符串”
基本过滤器：
$(“选择器：first”)
$(“选择器：last”)
$(“选择器：lt(索引值)”)
$(“选择器：gt(索引值)”)
$(“选择器：eq(索引值)”)

表单过滤器：(选择符合相应条件的对象)
$(“:type值：enabled”)----》选择可用的表单项
$(“:type值：disabled”)-----》选择不可用的表单项
$(“:type值：checked”)------》选择已选择的表单项
选择器>option:selected----》选择下拉框中值为selected值表单项
<select>
  <option value=”javascript”>javascript</option>
<option value=”go” selected>go</option>
<option value=”spring”>spring</option>

在jQuery中我们这么操作：
$(“select>option:selected”)--->意思是筛选在select标签下的option标签中选中的值

</select>

5.函数

第一组函数：
val（）:
只获取对象数组的第一个值
$(“div”).val() --->只获取到所有div中的第一个div里面的值；
$(“div”).val(“这是修改的值”)----》把所有的div里的值都换成“这是修改的值”；

text（）
获取对象数组里的值，并把每个对象里的值拼成字符串
$(“：text”).text() --->获取到所有text文本框里面的值并拼成字符串；
$(“: text”).text(“这是修改的值”)----》把所有文本框里的值都换成“这是修改的值”；

attr(“属性名”)------》 将获取对象的属性名获取
attr(“属性名”，“属性值”)----》 将获取对象的属性名的值改为新写进去的

第二组函数：
Remove（）清除掉获取的对象本身和他的子对象
如：$(“select”).remove()--->去除掉select标签，和这个标签里的所有子标签

Empty() 清除掉获取的对象的子对象
$(“select”).empty()---》去除掉select标签里的所有子标签，不包括select本身

Append() 给获取的标签添加一个子标签
$(“#divbox”).append(“<p>你好</p>”)----》给获取到的id为divbox的div对象里加入一个子标签<p>你好</p>

Html() 给获取的标签里添加html内容
$(“#divbox”).html(“<form><td><tr>内容一</tr><tr>内容二</tr></td></form>”)
给获取到的id为divbox的div对象里加入html内容


Each()给获取到的对象数组里的每一个对象（可以是数组，json，dom数组）执行一次操作函数(其中index指获取的每个对象对应的索引值，element指对应index指代的那个值)
操作方式一:
$.each(操作对象，function（index,element）{
   xxxxxxxx
})
如操作一个json对象var json = {“content”：“你好”，“name”：“张三”}
$.each(json,function(index,element){
   Alert(“index值：”+index+”,element值：”+element)；
})
此时循环弹出：
第一次弹出：index值：content,element值：你好
第二次弹出：index值：name,element值：张三

操作方式二：
$(选择器).each(function(index,element){
xxxxxxxx
})
同样操作json对象：
Json.each(function(index,element){
   Alert(“index值：”+index+”,element值：”+element)；
})
此时循环弹出：
第一次弹出：index值：content,element值：你好
第二次弹出：index值：name,element值：张三

6.jQuery绑定事件的方式

方式一：
$(选择器).事件名称（function（）{
    xxxxxxxx
}）


注意时间名称为js使用的事件名称去掉on,且名称均为小写，例如
$(“#btn”).click（function(){
Alert(这是一个单击响应事件“”)
}）

方式二：
$(选择器).on(事件名称，function（）{
   xxxxxx
})
当有多个事件的时候，每个事件名称之间用空格隔开
如：
$(“#btn”).on(click,function(){
  Alert(“这是一个单击响应事件”)
})

7.Jquery发送AJAX请求

$.ajax({
name1:value1,
name2:value2,
name3:value3
....
})
常用的属性值有：
Async：设置发送的请求为异步或同步
Data：设置从前端发送到服务器的数据
Datatype:设置前端需要服务器返回来的数据类型，当服务器读取到前端需要返回的数据类型，服务器再进行操作返回
Url:发送ajax请求的地址
Type:”GET”或”POST”
Error:function(){
xxxxx
}发送请求失败执行的函数
Success:function(resp){----》此处的resp为服务器响应回来的数据对象
  xxxxx
}发送请求成功且服务器返回数据正常，执行的函数

Ajax发送get请求
$.get({
Data:
Datatype:
Success:function(resp){
xxxxx
}
Url:xxxx

})
Ajax发送post请求

$.post({
Data:
Datatype:
Success:function(resp){
xxxxx
}
Url:xxxx

})