jquery基础总结

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：选取某个属性等于某个值的元素 $(“[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[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()小于 。 $(“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:$(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);
});