JavaScript 显示数据

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

jQuery必备

$(document).ready()必备
<script>
$(document).ready(function(){
$("p").click(function(){

$(this).hide();

});
});
</script>

jQuery 事件方法(点击、双击)

用的时候就是".click()"或者是".hover()"。
click()------鼠标单机(点击)
dblclick()----鼠标双击
mouseenter()-----鼠标移动到此元素上
mouseleave()-----鼠标从元素上移走
hover()------hover()方法用于模拟光标悬停事件。
focus()------当元素获得焦点时,发生 focus 事件。(一般用于input)
blur()------当元素失去焦点时,发生 blur 事件。(同上)
mousedown()--------当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件
mouseup()--------当在元素上松开鼠标按钮时,会发生 mouseup 事件。

隐藏、显示

$(this).parents(".ex").hide("slow"); ------parents()的大概意思就是class为ex的整个div

hide()-----隐藏
show()-----显示
toggle()------隐藏/显示

淡入淡出

fadeIn() ------用于淡入已隐藏的元素。
fadeOut() ------方法用于淡出可见元素。
fadeToggle()------ 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。(淡入/淡出)一个按钮
fadeTo()------ 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
fadeTo() 没有默认参数,必须加上 slow/fast/Time

滑动

slideDown()------滑出
slideUp()-------拉起
slideToggle()-----滑出/拉起

jQuery - 添加元素/删除元素

append() - 在被选元素的结尾插入内容(仍然在该元素的内部)
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素(就和清空差不多,清空div)

jQuery - 获取并设置 CSS 类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作(和反选差不多)

jQuery 遍历 - (祖先-后代)

parent()-----向上一级(父元素)
parents()------向上所有祖先元素
parentsUntil()-----向上到指定的元素之后,中间的所有元素
【上一行解释】:$("span").parentsUntil("div").css();------从span到div之间的所有元素

后代
children()-----所有儿子元素
find("*") ------所有的后代元素

同胞
siblings() 被选元素的所有同胞元素(不包括自己)。
siblings("p") 所有同胞中的p元素
next() 被选元素的下一个同胞元素。
nextAll() 被选元素的所有跟随的同胞元素。(就是在它后边的所有同胞)
nextUntil() 介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6"); ----从h2到h6之间的元素

过滤
first() 被选元素的首个元素。(比如$("div p").first(); 就是所有p元素的第一个p元素)
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。

  • $("p").eq(1);*-----和上边那个first差不多意思。不过这个是从0开始,这里的1代表了第二行。
    filter() 可以指定class或者id的一个方法。

$("p").filter(".url"); ---- 比如这个,p标签中所有包含class为url的标签
not() 方法返回不匹配标准的所有元素。和上一个相反

Last modification:November 17th, 2020 at 03:15 pm
If you think my article is useful to you, please feel free to appreciate