jquery基础总结

忘是亡心i 2023-02-26 02:24 12阅读 0赞

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开始，用 \*=;

$(“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”);  
过滤选择器：

：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);  
\});