Jquery

引言

• JavaScript作用:

1. 利用JavaScript创建标签 CRUD
   var divObj= document.createElement(“div”);
2. 利用JavaScript获取页面的各种标签
   document.getElementById(“divId”);
   document.getElementsByName(“user”);
   document.getElementsByClassName(“myClass”);
   document.getElementsByTagName(“div”);
3. 更改标签属性,文本,样式

 <div title=”提示消息” id=”divId”>XXXXXX</div>

docuoment.getElementById(“divId”).title=”newValue”;;
docuoment.getElementById(“divId”).innerHTML=”newValue”;
docuoment.getElementById(“divId”).style.color=”red”;
docuoment.getElementById(“divId”).className=”myClass”;

4. 给页面标签/按钮绑定事件
5. 发送Ajax

• 理论上：只用JS实现制作网页,抛弃HTML/CSS

Jquery

1_Jquery概念
是什么？能做什么？怎么做?

是什么:js框架
为什么Jquery?
Js弊端1_函数命名繁冗
2_兼容性不好

作用 选择 标签 属性样式文本 事件 Ajax

1_利用JavaScript创建标签 CRUD
var divObj= document.createElement(“div”);

2_利用JavaScript获取页面的各种标签 选择器
document.getElementById(“divId”);
document.getElementsByName(“user”);
document.getElementsByClassName(“myClass”);
document.getElementsByTagName(“div”);

3_更改标签属性,文本,样式

<div title=”提示消息” id=”divId”>XXXXXX</div>
docuoment.getElementById(“divId”).title=”newValue”;; //控制标签属性
docuoment.getElementById(“divId”).innerHTML=”newValue”;//控制标签文本
docuoment.getElementById(“divId”).style.color=”red”; 控制标签样式
docuoment.getElementById(“divId”).className=”myClass”;控制标签样式

4_给页面标签/按钮绑定事件 简单使用
$(“#dv”).click(function(){…});

5_发送Ajax

怎么用?

1_下载,页面导入JQ文件

2_jq入门_helloWorld

3_Jq对象和JS对象区别

4_JQ选择器
Jq内置一种规则,选中页面元素

5_选中页面元素控制标签文本/属性/样式

6_对页面标签进行CRUD操作

JS和JQ对象互换

• Js对象__>JQ $(js对象)
• JQ对象__>Js $(“#dv”)[0]

***Jq绑定事件_jq实现入口函数_jq控制标签样式

Js绑定事件:

1_
<div on事件名称=”fn()”>
2_
document.getElmenetById(“id”).onclick=function(){
}

Js控制标签样式

<div class=”” style=””>
1_
documente.getElementById(“id”).className=”xxx”;  //class关键字
2_
documente.getElementById(“id”).style.color=”red”;

Jq:

1_ jq如何为按钮绑定事件

$(“#btn”).click(function(){ .....});

2_jq方式实现入口函数

$(function(){ ..... });

3_jq获取到标签之后控制标签外观样式

$(“#dv”).css(“background-color”,”red”);

jQuery选择器

CSS选择器:

• 按照CSS规则选中页面元素,为这些元素对象设置外观样式
• 标签
  div{ 背景色,文字颜色 }
• 类

  .className{背景色,文字颜色}   <div class=”className”>XXXX</div>

• ID

• #myId{}   <div id=”myId”>xxx</div>
  

• 属性

• Input[type=’text’] {   }
  

• 子孙
  div span{}
• 伪类
  a:active{}
• 子类
  div > span{}
• 全选 *

Js获取元素

• document.getElementById();
• document.getElementsByTagName();
• document.getElementBysName();

jq基本选择器

$(“#id”); $(“.myClass”); $(“tagName”) $(“#id,div,.myClass”);
$(“#id”); $(“.myClass”); $(“tagName”) $(“#id,div,.myClass”);

1_标签选择器（元素选择器）
语法： $(“html标签名”) 获得所有匹配标签名称的元素
2_id选择器
语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3_类选择器
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4_并集选择器：
语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

层级选择器

$(“a b”); 后代关系
$(“a > b”); 父子关系

1_后代选择器
语法： $("A B ") 选择A元素内部的所有B元素
2_子选择器
语法： $(“A > B”) 选择A元素内部的所有B子元素

属性选择器

通过标签的属性来过滤筛选元素

1_属性名称选择器
语法： $(“A[属性名]”) 包含指定属性的选择器
2_属性选择器
语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
3_复合属性选择器
语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

过滤选择器

通过元素在页面标签中的位置选中元素

1_首元素选择器
语法： :first 获得选择的元素中的第一个元素
2_尾元素选择器
语法： :last 获得选择的元素中的最后一个元素
3_非元素选择器
语法： :not(selector) 不包括指定内容的元素
4_偶数选择器
语法： :even 偶数，从 0 开始计数
5_奇数选择器
语法： :odd 奇数，从 0 开始计数
6_等于索引选择器 equals:等于
语法： :eq(index) 指定索引元素
7_大于索引选择器 greater than:比XXXX大
语法： :gt(index) 大于指定索引元素
8_小于索引选择器 less than:比XXXX小
语法： :lt(index) 小于指定索引元素
9_标题选择器 head:头部
语法： :header 获得标题（h1~h6）元素，固定写法

表单过滤选择器

通过表单组件上特有的属性选中页面元素
enabled disdabed checked selected 这些属性只有在表单中才有

1_可用元素选择器
语法： :enabled 获得可用元素
2_不可用元素选择器
语法： :disabled 获得不可用元素
3_选中选择器
语法： :checked 获得单选/复选框选中的元素
4_选中选择器
语法： :selected 获得下拉框选中的元素

Jq控制标签内容

• js
  document.getElementById(“dv”).innerHTML=”XXXX”;
  alert(document.getElementById(“dv”).innerHTML);
• 1_ html(): 获取/设置元素的标签体内容
• 2_ text(): 获取/设置元素的标签体纯文本内容
• 3_ val()： 获取/设置元素的value属性值

控制标签属性

1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性

• attr和prop区别？
  1. 如果操作的是元素的固有属性，则建议使用prop
  2. 如果操作的是元素自定义的属性，则建议使用attr

控制标签样式

1_ addClass():添加class属性值
2_ removeClass():删除class属性值
3_ toggleClass():切换class属性
* toggleClass(“one”):
* 判断如果元素对象上存在class=“one”，则将属性值one删除掉。
如果元素对象上不存在class=“one”，则添加
4_ css():

标签CRUD

父标签/子标签
父标签.append(子标签);
子标签.appendTo(子标签);

父标签.preppend(子标签);
子标签.preppendTo(父标签);

哥哥标签.after(弟弟标签);
弟弟标签.insertAfter(哥哥标签);

哥哥标签.before(弟弟标签);
哥哥标签.insertBefore(弟弟标签);

Jq:是什么?能做什么?怎么做?
选择器 11
CRUD标签
控制标签属性文本样式 11
为标签绑定事件 简单用
发送Ajax

总结

3_jquery
3_1_JS弊端_了解
*_命名繁冗 *_兼容
自定义JS框架
3_2_JQ是什么_了解
是JS封装,解决JS弊端
做什么?
*_对页面标签进行CRUD操作
*_获取任意标签
*_控制标签属性/文本/样式 <div title=”” id=” ”>XXXX
*_为标签绑定事件
*_发送Ajax

3_3_Jq快速入门_实现
下载导入使用即可
3_4_jq_js对象相互转换之后_重点
Js对象 Jq对象
$(js对象); $(“”)[0]

3_5_jq_绑定事件_入口函数_控制样式
$(“#id”).事件名称(function(){});
$(function(){ xxxx });

4_选择器_重点
4_1_基本选择
$(“#id”); $(“.class”); $(“div”); $(“#myId,.myClass,div”);
4_2_层级选择
$(“ a b”); $(“ a > b”);
4_3_属性选择
$(“div[id]”);
$(“div[id=’test’]”);
$(“div[id!=’test’]”);
$(“div[id^=’te’]”);
$(“div[id$=’te’]”);
$(“div[id*=’te’]”);
$(“input[type=’text’][name=’username’]”);

4_4_过滤选择
$(“div:first”);
$(“div:last”);
$(“div:odd”);
$(“div:even”);
$(“div:eq(3)”);
$(“div:lt(3)”);
$(“div:gt(3)”);

4_5_表单过滤选择
$(“input:disabled”);
$(“input:enabled”);
$(“input[tyupe=’checkbox’]:checked”);
$(“select[id=‘xx’] > option:selected”);

5_控制标签文本
$obj.val(); $obj.val(“newValue”);
$obj.html(); $obj.html(“XXX”)
$obj.text(); $obj.text(“XXX”)

6_控制标签属性 attribute:属性 property:属性
$obj.attr(“name”); //获取name属性的值 控制自定义属性
$obj.attr(“name”,”newValue”); //设置name属性的值
$obj.prop(“name”); //获取name属性的值 控制原生属性
$obj.prop(“name”,”newValue”); //设置name属性的值
$obj.removeAttr(“”); //移除指定名称的属性
$obj.removeProp(“”);//移除指定名称的属性

7_控制标签样式
$obj.attr(“class”,”myClass”); //为标签设置myClass样式
$obj.addClass(“”); //追加样式
$obj.removeClass(“”); //移除样式
$obj.toggleClass(“”); //切换样式

$obj.css(“color”); //获取文本颜色
$obj.css(“color”,”red”);//设置文本颜色

8_对标签进行CRUD
创建标签:

XXXX $(“XXXX”); var obj=documrent.createElement(“option”); obj.id=”myId’; obj.innerHTML=”XXXXX”; 添加标签 append appendTo prepend prependTo after insertAfter before insertBefore 移除标签 $obj.remove(); $.obj.empty();