Jq基础:
基本选择器:
标签选择器,类选择器,id选择器,并集选择器。
层次选择器:
后代选择器:KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲one two”):后代里面所…(“#one>two”):后代里卖得子代得two都被选择
紧邻得下一个兄弟:KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲one+two”)紧邻one得…(“#one~two”)one后面得同辈得所有two
属性选择器:
1:包含某个元素 $(“[id]”) 选取包含id属性的元素。
2:选取某个属性等于某个值的元素
(
“
[
i
d
=
’
a
a
a
’
]
”
)
。
=
3
:
选
取
某
个
属
性
不
等
于
某
个
值
的
元
素
。
!
=
4
:
选
取
以
某
个
值
开
头
的
某
个
属
性
的
元
素
,
i
n
d
e
x
从
0
开
始
,
用
=
;
5
:
选
取
以
某
个
值
结
尾
的
某
个
属
性
的
元
素
,
i
n
d
e
x
从
0
开
始
,
用
(“[id=’aaa’]”)。= 3:选取某个属性不等于某个值的元素。 != 4:选取以某个值开头的某个属性的元素,index从0开始,用^=; 5:选取以某个值结尾的某个属性的元素,index从0开始,用
(“[id=’aaa’]”)。=3:选取某个属性不等于某个值的元素。!=4:选取以某个值开头的某个属性的元素,index从0开始,用=;5:选取以某个值结尾的某个属性的元素,index从0开始,用=;
6:选取包含某个值的某个属性的元素,index从0开始,用 *=;
<li><a href="#" id="one">111111</a></li>
<li><a href="#" id="two">222222</a></li>
<li><a href="" id="three">333333</a></li>
<li><a href="">444444</a></li>
$(“a[id]”).css(“color”,“red”);
$(“a[id=‘one’]”).css(“font-size”,“30px”);
$(“a[id!=‘one’]”).css(“font-size”,“30px”);
$(“a[id^=‘o’]”).css(“font-size”,“30px”);
(
"
a
[
i
d
("a[id
("a[id=‘o’]").css(“font-size”,“30px”);
$(“a[id*=‘e’]”).css(“font-size”,“30px”);
过滤选择器:
<li><a href="#">111111</a></li>
<li><a href="#">222222</a></li>
<li><a href="">333333</a></li>
<li><a href="">444444</a></li>
<li><h1>333333</h1></li>
<li><h2>444444</h2></li>
-
:first选择第一个。$(“li a:first”).css();
- last选择最后一个。$(“li a:last”).css();
- eq()等于某个元素。从0开始。 $(“li a:eq(1)”).css();
-
gt()大于, : lt()小于 。
(
“
l
i
a
:
g
t
(
1
”
)
.
c
s
s
(
)
;
。
(“li a:gt(1”).css(); 。
(“lia:gt(1”).css();。(“li a:lt(2)”).css();
偶数,even; 奇数,odd $(“li a:even/odd”).css();
header所有的标题元素 $(“: header”).css();
不是某个元素 $(“li:not(a)”).css();
筛选选择器:
Children:$(“ul”).children(“li”).css(). 相当于子代选择器。
Find; $(“ul”).find(“li”).css();相当于后代选择器。
Siblings; $(“#one”).siblings(“li”).css(); 除了自己以外的所有的兄弟选择器。
Parent ;父类; eq, next,prev;
链式编程,点点点; 隐式迭代: $(“li”).css({“font-weight”:“bold”,“color”:“red”});
添加删除样式:addClass, removeClass。 先定义样式,再添加或则删除到某个元素。
设置元素的显示和隐藏:show();hide(); 括号里可以加速度就是时间:毫秒数。
一般和事件联合使用,点击隐藏或者显示。
可见性过滤选择器:
$(function(){
$(".xianshi").click(function(){
$(".one:hidden").show();// 把所有隐藏的元素显示出来
});
$(".yincang").click(function(){
$(".one:visible").hide(); //把所有显示的属性隐藏起来。
});
});
Jq事件:
Window事件:1:
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
2
:
(document).ready(function(){ }) 2:
(document).ready(function())2:(function(){ })
鼠标事件:click,dbclick, mouseover, mouseout; 就是把on去掉
键盘事件:keydown, keyup,keypress。
表单事件: fucus, blur.
事件冒泡: 当父级和子元素拥有同一个事件时,会自动调用父级的事件,如果想用子代的事件,可以用return false或则用,event.stopPropaGation.
事件使用的格式:
$("#one").click(function(){
$(this).addClass(“three”);
});
$("#three").keydown(function(){
// if (event.keyCode===13) {
// alert(“aaa”);
// }
// });
$("#five").focus(function(){
// $(this).addClass(“four”);
// })
页面加载完成自动聚焦:$("#aaa").focus();
fadeToggle方法:
FadeIn,fadeOut,fadeToggle:分别是淡入,淡出和淡入淡出,后米可以加时间
$("#out").click(function(){
$("#aa").fadeOut(2000);
});
$("#in").click(function(){
$("#aa").fadeIn(2000);
});
$("#in-out").click(function(){
$("#aa").fadeToggle(2000);
});
Slidedown,向下滑动,slideUp向上滑动:
$("#down").click(function(){
$("#aa").slideDown(2000);
});
$("#up").click(function(){
$("#aa").slideUp(2000);
});