Jquery知识点记录

语法：
操作HTML元素
$(selector).action()；
$("#choose").hide();

文档就绪事件：等DOM结构加载完成后就执行jQuery代码。一个页面可以写多个ready()。【window.onload一个页面只可以写一个，要等到所有的内容包括图片加载完毕才可以执行onload()，不能简写】
$(document).ready(function(){
…
})
简写：
$(funtion() {…});

注意，若是需要在JS或者图片都加载完毕才能进行操作的话，建议用window.onload。

选择器
$(“p”) //元素选择器
$("#txt") //ID选择器
$(this) //获取当前HTML元素
$(“p:first”) //选取第一个p元素
$("[href]") //选取带href属性的元素
$(“ul li:first-child”) //选取每个<ul> 元素的第一个 <li> 元素
$(“ul li:first”) //选取第一个 <ul> 元素的第一个 <li> 元素

事件
在这里插入图片描述
hover触发mouseenter和mouseleave方法

$("p").hover(
    function(){ alert("进入了p")},
    function(){  alert("离开了p")};
);

隐藏显示
----hide()、show()、toggle()切换hide和show方法
----fadeIn()淡入，fadeOut()淡出、fadeToggle()、fadeTo()渐变效果（0-1）
动画
animate()
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

    $("button").click(function(){
 		 $("div").animate({
  			  left:'250px',
   			  opacity:'0.5',
   			 height:'150px',
    		width:'150px'
  });
});

animate()属性名用驼峰命名法，paddingLeft、marginRight.

清除动画
$(selector).stop(stopAll, goToEnd);
stop()：当有多个动画时，stop用于停止当前正在进行的动画。
stopAll为true时会停止所有的动画。默认值是false。
GoToEnd: 是否立即完成当前动画，默认是false。

jQuery链
在一个元素上链接多个动作
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

添加元素
append(): 在被选元素结尾插入内容
prepend()：在被选元素开头插入内容，都是在元素内部嵌入
after()、before()在元素外面追加

jQuery获取元素的盒子尺寸
width() /height()返回或者设置元素的内容盒子的宽/高，不包括内边距、边框或外边距
innerWidth().innerHeight()返回或设置元素包括内边距的宽/高。
outerWidth()/outerHeight()返回或设置元素包括内边距和边框的宽/高。
outerWidth(true)/outerHeight(true)返回或设置元素包括内边距、边框、外边距（如果有的话）的宽/高。
遍历
parent()：返回被选元素的直接父元素，无参数
parents()：返回被选元素的所有祖先元素，一直到根元素，无参数
parentsUtil()：返回在两个给定元素之间的所有祖先元素，有参数。
若是选择器和参数为同一个，会变成返回该元素的所有祖先元素。
若是选择器是参数的父元素，那么返回的是选择器的所有祖先元素。
若是选择器是参数的子元素，那么会返回选择器的在参数元素以内的父元素。结果不会包含参数元素。

$(document).ready(function() {
	$('span').parentsUtil('div');  //返回在span和div之间的所有祖先元素
})

遍历后代
children()：返回被选元素的所有直接子元素（不包括子孙元素），参数如果存在则有点条件筛选的意思。
find()：返回被选元素的所有子元素包括子孙元素。

遍历兄弟元素
siblings()：被选元素的所有同胞元素。不包括同胞元素中的子元素
next()：被选元素的下一个相邻同胞元素。没有参数
nextAll()：被选元素的所有跟随同胞元素，往下找。没有参数
nextUtil()：给定两个被选元素之间的同胞元素。有参数
若是选择器元素在参数之前，返回两者之间的同胞元素。
若是选择器在参数元素之后，则会返回选择器的相邻下代同胞元素。
prev()，prevAll()，prevUtil()，与上述类似，但是是向前查找

猜你喜欢