jQuery 整合

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liiuijkiuu/article/details/52690447

jQuery 初步
Jquery语法 : (selector).action()JqidHtml (“ 元素”). 通过元素名称获取指定的元素

id 选择器:$(“#id”) 通过元素的id 属性选取指定的元素。html 中元素的id 是唯一的

.class 选择器 :$(“.test”) 通过指定的class 查找元素

1. ()2. (this) 获取当前HTML元素
如:
(document).ready(function()$("button").click(function()$(this).hide();););thisbutton3. (“[href]”) 获取带有href 属性的元素
4.$(“a[target=‘_blank’]”) 获取所有target属性等于_blank的元素。
5.$(“tr.even”) 获取偶数位置的
元素
6.$(“tr.odd”) 获取奇数位置的元素

jQuery常用的事件方法
$(document).ready() 方法允许我们在文档完全加载完成后执行函数。
1.click() 该方法是当按钮点击事件发生触发会调用一个函数。
2.dblclick () 当双击元素,会触发dblclick 事件
3.mouseenter() 当鼠标指针传过元素时,触发mouseenter事件。
4.mouseleave() 当鼠标指针离开元素时,触发mouseleave 事件。
5.mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件,
6.mouseup() 当鼠标上松开鼠标按钮时,会发生mouseup 事件。
7.hover() 用于模拟光标悬停事件。
8.focus() 当元素获得焦点,当鼠标点击选中或者是tab 键定位大到元素时,该元素就会获得焦点。focus()方法触发focus事件,或规定当前发生focus事件时运行的函数。
9.blur() 当元素失去焦点时,发生blur事件。blur()方法触发blur事件,或规定当发生blur 事件时运行的函数

jQuery 隐藏和显示
.hide() 隐藏
.show() 显示
可选speed 参数规定隐藏/显示的速度,可以取以下值:”slow”,”fast” 或毫秒。 (p).hide(1000);.toggle()show(),hide() ().toggle(spend,callback);
可选的speed参数固定隐藏、显示的速度。可以取:slow fast 或毫秒。
可选的callback 参数是toggle()方法完成后所执行的函数名称。

jQuery 淡入淡出
fadeln() 用于淡入已隐藏的元素
语法:$(selecor).fadeIn(speed,callback); 可选的speed 参数规定效果的时长,他可以取以下值 :slow ,fast 或毫秒。
fadeOut用于淡出可见的元素(隐藏元素) 参数同fadeln
fadeToggle() 方法用于切换fadeIn和fadeOut

jQuery 滑动方法
slideDown()方法 用于向下滑动元素 可选参数speed的值 slow fast或毫秒
slideUp() 方法用于向上滑动元素。可选参数speed的值 slow fast 或毫秒
slideToggle() 方法用于切换slideDown() 与slideUp() 方法间进行切换

jQuery 效果
动画-animate() 语法:
(selector).animate(params,speed,callback);paramscss,speedslowfast (selector).stop(stopAll,goToEnd);
可选stopAll 参数规定是否应该清除动画队列。默认的false,即停止活动的动画,允许任何排入队列的动画向后执行。
可选的goToEnd 参数规定是否立即完成当前动画。默认的false

jQuery 获取内容和属性

1.获取内容的三个方法 -text(),-html() -val()
.text() -设置或返回所选元素的文本内容
.html() -设置或返回所选元素的内容
.val() -设置或返回表单字段的值
2.获取属性-attr()
.attr() 如:(“button”).click(function(){  
                         alert(
(“#runoob”).attr(“href”));
});

即可以获取id 为runoob 的href 的属性值

3.设置内容和属性
如获取内容的三个方法一样,同时text() html() val() 也拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始的值
设置属性也是如同获取属性一样采用的-attri()
如:$(“#runoob”).attr({
“href” : “http://www.runoob.com/jquery“,
“title” : “jQuery 教程”
});

4.添加新元素
.append() 在被选元素的结尾插入内容文本
.prepend() 在被选元素的开头插入内容文本
.after() 在被选元素之后插入内容
.before() 在被选元素之前插入内容

5.删除元素
.remove() -删除被选元素(及其子元素)如:(“#div1”).remove();  
 remove方法可以接受一个参数,允许对元素进行过滤  
如:
(“p”).remove(“.italic”);就是删除 class=”italic” 的所有

元素:

.empty() -从被选元素中删除子元素 如:$(“#div1”).empty();

6.获取并设置css 类
.addClass() -向被选元素添加一个或多个样式
.removeClass() -从被选元素删除一个或多个样式
.toggleClass() 对被选元素进行添加/删除样式的切换操作
.css() 设置或返回样式属性
返回属性值 如: (p).css(backgroundcolor); (“p”).css({“background-color”:”yellow”,”font-size”:”200%”});

7.遍历Dom
Dom的家族树
这里写图片描述


父级元素
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有父级元素
parentsUntil() 方法 返回介于两个给定元素之间的所有祖先元素。
如:$(“span”).parentsUntil(“div”); 就是返回span 和div 之间的所有祖先元素。

子元素
children() 返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

兄弟元素(同胞元素(siblings))
siblings() 返回被选元素的所有同胞元素
next() 返回被选元素的下一个同胞元素
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil () 返回介于两个给定参数之间的所有跟随的同胞元素

Ajax 这些都是后台开发中非常常用的,就不细说了
.post () .get(),
.load()
语法:$(selector).load(url,data,callback);

猜你喜欢

转载自blog.csdn.net/liiuijkiuu/article/details/52690447