Test 24

• Jquery
  1. 获取jquery包装集对象：
     1. $(“选择器”)
     2. 如果元素不存在，不会返回null，会返回空的jquery对象，根据length==0来判断是否获取成功
  2. 获取jsDom对象
     1. Document.getElement...
     2. 如果元素不存在，返回null，根据==null判断是否获取到Dom对象
  3. JsDom对象转为jquery对象
     1. $(js对象)
  4. Jquery对象转为jsDom对象
     1. Jq对象.[索引]
     2. Jq.get()
  5. 注意：
     1. jsDom对象与jq对象不能互相调用其方法
     2. Jq的函数只能jq对象能够调用
• jquery选择器：选中某个或某组元素
  1. 分类：
     1. 基础选择器
        • Id选择器 ：#id  $(“#testDiv”)选择id为testDiv的元素
        • 元素名称选择器 ：element   $ (“div”) 选择所有div元素
        • 类选择器 ：.class   $(“.bule”) 选择所有class=blue的元素
        • 选择所有元素 ：*  $ (“*”) 选择所有元素
        • 组合选择器 ：selector1,selector2,selectorN   $("#testDiv,span,.blue")同时选中多个选择器匹配的元素
     2. 层次选择器
        • 后代选择器 ：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元素
     3. 表单选择器
        • 查找所有的input元素：$(“:input”)
        • 注意：会匹配所有的input、textarea、select和button元素。
        • ⽂本框选择器 :text 查找所有⽂本框：$(":text")
        • 密码框选择器 :password 查找所有密码框：$(":password")
        • 单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
        • 复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
        • 提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
        • 图像域选择器 :image 查找所有图像域：$(":image")
        • 重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
        • 按钮选择器 :button 查找所有按钮：$(":button")
        • ⽂件域选择器 :file 查找所有⽂件域：$(":file")
     4. 过滤选择器
        • :odd 匹配下标奇数元素
        • :even 匹配下标为偶数元素
        • :eq(index) 匹配下标为index
        • :gt(index) 匹配下标>index
        • :checked 匹配被选中的
        • Eg:

console.log($("input:eq(3)"));

console.log($("input:gt(3)"));

onsole.log($("input:checked"));

（5）属性选择器

• • • •  [属性名]包含这个属性的被选中
      • [属性名="属性值"] 包含指定属性=指定值的元素被选中
      • Eg:

console.log($("[abc]"));

console.log($("input[abc]")); ——>选中input标签上的abc属性

console.log($("input[abc=123]"));

• jquery属性操作
  1. 分类：固有属性（固有属性、共有属性），标签提供的属性；

自定义属性

Boolean属性：checked、selected，disabled

1. 1. Attr 与 prop 区别
      1. Atter可以操作固有属性，自定义属性，prop只能操作固有属性
      2. Atter attr 操作布尔属性(checked),得到的属性值为属性设置的值 checked = 'checked'

prop 操作布尔属性(checked),得到的结果为true或false

1. 1. 获取属性值
      1. Atter（属性名称） 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。attr('checked')attr('name')
      2. prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')
   2. 设置属性值
      1.  attr(属性名称，属性值)设置指定的属性值
      2.  prop(属性名称，属性值) 设置具有true和false的属性值 prop('checked',’true）
   3. 移出属性
      1.  removeAttr(属性名) 移除指定的属性 removeAttr('checked')
   4. 操作样式：
      1. attr("class") 获取class属性的值，即样式名称
      2. attr("class","样式名") 修改class属性的值，修改样式
      3. addClass("样式名") 添加样式名称，添加指定属性,如果原标签中已经存在,覆盖原有的值列表
      4. css() 添加具体的样式
      5. removeClass(class) 移除样式名称
   5. 操作元素内容：
      1. Html（）获取元素的html内容，html可以识别纯文本，以及html标签
      2. text（）获取元素的文本内容，不包含html
      3. html("html, 内容") 设定元素的html内容：$("#html").html("你好html");
      4. text("text, 内容") 设置元素的⽂本内容，不包含html：

$("#text").text("你好text");

• Jquery创建与添加元素
  1. 创建元素: $(‘创建内容’)，var ele = $('<p id="p1"><span>你好span</span>你好p1</p>');
  2. 添加元素：
     1. prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
     2. $(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头
     3. append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
     4. $(content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部
     5. before() 在元素前插⼊指定的元素或内容:$(selector).before(content)
     6. after() 在元素后插⼊指定的元素或内容:$(selector).after(content)
  3. 删除元素
     1. Remove() 删除所选元素或指定的元素，包括整个标签和内容一起删除，$("#box").remove();
     2. empty() 清空所选元素的内容，$("#box").empty();
  4. 遍历元素
     1. $(selector).each(function(index,element)) :遍历元素，参数 function 为遍历时的回调函数，index 为遍历元素的序列号，从 0 开始，element是当前的元素，此时是dom元素。
• jquery事件绑定
  1. Ready加载事件
     1. $(function(){})
     2. jQuery(function(){})
     3. $(document).ready(function(){})
     4. 区别：
        • window.onload : 待DOM结构,与资源全部加载完成之后触发
        • Ready  : 待DOM结构载完成之后触发
  2. Bind 绑定事件
     1. Bind(“事件名称”，function（）{

触发函数

})

• jquery Ajax
  1. Ajax 异步请求
     1. $.ajax ({  ——————>配置请求的参数设置

Type: 请求方式（get/post），

Url: “请求服务器的位置”，

Data: 请求数据，

dataType: 预期的服务器响应数据的类型 （json、text、html），

Success : function（data）{

请求成功后的回调函数

参数data：服务器响应的数据

}，

Erro ： function（）{

请求失败后的回调函数

}

})；