课程介绍
1.jQuery认识;(了解)
2.jQuery选择器(掌握)
3.jQuery方法(掌握)
4.jQuery ajax请求;(掌握)
5.jQuery二级联动;(掌握)
*
一,jquery认识
jQuery的核心特性可以总结为:
1)具有独特的链式语法 和短小清晰的多功能接口;
2)具有高效灵活的css选择器,并且可对CSS选择器进行扩展;
3)拥有便捷的插件扩展机制和丰富的插件;
jQuery的核心思想:写得更少,做得更多------------->这个就是他的生存之道
Write less do more
*
##二 使用jquery
jQuery===$
===先比较类型,再比较值
返回值:true
因为其他的js框架也可能使用
符
号
,
使
用
j
Q
u
e
r
y
来
处
理
c
o
n
s
o
l
e
.
l
o
g
(
符号, 使用jQuery来处理 console.log(
符号,使用jQuery来处理console.log(("#myDiv"));
console.log(jQuery("#myDiv"));
//为什么提供两种写法
console.log(window.$ === window.jQuery);//ture
怕$被其他占用
2.2.DOM对象与jQuery对象转换
$(function(){
/**
原生对象.innerHTML = “”;
jQuery对象.html("");
mydiv1:jQuery元素对象(对原生的dom对象进行了封装)
封装之后提供了更多实现的功能
jQuery对象也没有原生dom对象的方法【基本已经够用】
mydiv2:原生的dom对象
原生对象中没有jQuery对象中的方法,那么我们要把dom对象转成jQuery对象
三.jquery选择器
1.Id选择器 #
$("#myDiv")
如果有多个id,只能操作第一个
如果要操作的控件在循环里面(id会重复出现),就不能使用id选择器。
2…class 样式选择器 .
$(".div").html(“xxx”);
如果有多个对应的样式,都可以全部进行操作
3.element 元素选择器
$(“div”).html(“xxx”);
(
"
i
n
p
u
t
"
)
.
v
a
l
(
"
所
有
的
i
n
p
u
t
"
)
;
如
果
有
多
个
对
应
的
控
件
,
都
可
以
全
部
进
行
操
作
∗
∗
4.
∗
所
有
元
素
(
控
件
)
∗
∗
c
o
n
s
o
l
e
.
d
e
b
u
g
(
("input").val("所有的input"); 如果有多个对应的控件,都可以全部进行操作 **4.* 所有元素(控件)** console.debug(
("input").val("所有的input");如果有多个对应的控件,都可以全部进行操作∗∗4.∗所有元素(控件)∗∗console.debug(("*"));获取所有的页面控件
5.selector1选择器
console.debug($(“div,input”));
6.层次选择器(有上下级关系)
7.祖先 后代
在给定的祖先元素下匹配所有的后代元素
$("#book li")
- 西游记
- 水许传
- 红楼梦
三国
- 魏
- 蜀
- 吴
8.父亲 儿子
在给定的父元素下匹配所有的子元素
$("#book > li")
- 西游记
- 水许传
- 红楼梦
- 三国
- 魏
- 蜀
- 吴
四.jQuery注册事件
jQuery注册事件方法:
1)KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).click(func…(“#id”).on(“click”,function(){});
取消:KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).off(“click…(“#id”).bind(“click”,function(){});
取消:$(“#id”).unbind(“click”);
五.二级联动jQuery版本
参考课件,和老师上课代码,视屏
json转换
发送ajax请求
$.get/post(url,params,function(result){},type)
比如:
$.get("/getData",{“key1”,“value2”,“key2”:“value2”},function(result){},“json”)