jquery选择第一个元素 jquery选择前一个元素

转载

mob64ca1419a401 2023-10-11 22:54:54

文章标签 jquery选择第一个元素 javascript ViewUI 选择器 ide 文章分类 jQuery 前端开发

一、JQuery遍历
　　概念：大概的意思就是从当前元素开始，可以找到它的父、子元素。

　　1. 遍历 - 先祖

　　　　parent() - 返回被选元素的父元素.

　　　　parents() - 返回被选元素的父元素、父元素的父元素..到顶层.

　　　　parents("ul") - 返回被选元素的<ul>标签的父元素，不包含兄弟元素.

　　　　parentsUntil("div") - 返回被选元素与<div>父元素之间的所有祖先元素.

　　2. 遍历 - 后代

　　　　children() - 返回被选元素的所有直接子元素,不包括孙元素.

　　　　你也可以使用可选参数(选择器)来过滤对子元素的搜索，只能选择子元素.

　　　　children("#1") - 返回被选元素的id为“1”的子元素,不过用id选择器的价值不高，建议用.class选择器.

　　　　find(选择器) - 和child方法不同的是它可以返回所有后代元素.

　　3. 遍历 - 同胞(兄弟)

　　　　siblings() - 返回被选元素的所有同胞元素，可选对数(选择器)，和以上方法的效果一样.

　　　　next() - 返回被选元素的下一个同胞元素,该方法只返回一个元素.

　　　　nextAll() - 返回被选元素的所有下一个同胞元素，不会包含上一个的.

　　　　nextUntil("h6") - 和parentUntil()类似,返回被选元素与<h6>同胞元素之间的所有同胞元素.

　　　　竟然有选取下一个元素的方法，就有提供上一个选取元素的方法：prev()、prevAll()、prevUntil()，具体和以上用法一样.

　　4. 遍历 - 过渡

　　　　first() - 返回被选元素的首个元素,意思是说如果被选兄弟元素有多个，他会选取第一个兄弟元素，也就是当前元素.

　　　　last() - 返回被选元素的最后一个兄弟元素.

　　　　eq(index) - 返回被选元素中带有指定索引号的元素，索引从0开始(the index start at zero).

　　　　filter(选择器) - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回.

　　　　not(选择器) - 与filter()相反，不匹配的元素会被返回.

二、JQuery的效果

　　可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
　　可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

　　1. 隐藏和显示

　　　　hide(speed,callback) - 隐藏 HTML 元素.

　　　　show(speed,callback) - 显示 HTML 元素.

　　　　toggle(speed,callback) - 用于切换隐藏和显示，意思是：如果隐藏就显示，显示就隐藏.

　　2. 淡入淡出

　　　　fadeIn(speed,callback) - 淡入，渐显.

　　　　fadeOut(speed,callback) - 淡出，渐隐.

　　　　fadeToggle(speed,callback) - 用于切换淡入和淡出，和以上toggle()方法用法是一样的.

　　　　fadeTo(speed,opacity,callback) - 允许渐变为给定的不透明度(值介于 0 与 1 之间),opacity是不透明度参数.

　　3. 滑动

　　　　slideDown(speed,callback) - 用于向下滑动元素.

　　　　slideUp(speed,callback) - 用于向上滑动元素.

　　　　slideToggle(speed,callback) - 用于切换向下滑动和向上滑动，和以上toggle()/fadeToggle()方法用法是一样的.

　　　　不得不说JQuery真是强大，之前用Javascript用得太憋屈了.

　　4. 动画

　　　　必需的 params 参数定义形成动画的 CSS 属性.

　　　　animate({params},speed,callback) - 用来自定义一个动画.

　　　　stop() - 用于停止动画.

　　　　使用 CSS 属性的用法
　　　　　　(1)使用驼峰命名法命名属性，如： padding-left ---> paddingLeft.
　　　　　　(2)属性间用逗号分隔,如：paddingLeft：'200px',marginRight:'200px'.
　　　　　　(3)设置属性值最好把值使用' '或" "括上，因为有些属性JQuery识别不了.
　　　　　　(4)可以使用相对值：+=、-=，如：paddingLeft：'+=200px',marginRight:'-=200px'.
　　　　　　(5)甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"，如：height:'toggle'.
　　　　　　(6)jQuery animate() 还可以使用队列功能，如：
　　　　　　　　$("button").click(function(){
　　　　　　　　　　var div=$("div");
　　　　　　　　　　div.animate({height:'300px',opacity:'0.4'},"slow");
　　　　　　　　　　div.animate({width:'300px',opacity:'0.8'},"slow");
　　　　　　　　　　div.animate({height:'100px',opacity:'0.4'},"slow");
　　　　　　　　　　div.animate({width:'100px',opacity:'0.8'},"slow");
　　　　　　　　});
　　　　　　　　可以进入该网体验：http://www.runoob.com/jquery/jquery-animate.html

　　5. 方法链接

　　　　JQuery提供方法链操作，如：$("#p1").css("color","red").slideUp(2000).slideDown(2000);
　　　　JQueryjQuery 语法不是很严格，建议代码换行和缩进：
　　　　　　$("#p1").css("color","red")
　　　　　　　　.slideUp(2000)
　　　　　　　　.slideDown(2000);

六、HTML元素操作

　　1. 获得和设置内容(设置在括号中设)

　　　　text() - 设置或返回所选元素的文本内容.

　　　　html() - 设置或返回所选元素的内容(包括 HTML 标记).

　　　　val() - 设置或返回表单字段的值.

　　　　attr("属性名"，"可选属性值") - 方法用于获取属性值.

　　　　attr() 方法也允许您同时设置多个属性：
　　　　　　$("button").click(function(){
　　　　　　　　$("#runoob").attr({
　　　　　　　　　　"href" : "http://www.runoob.com/jquery",
　　　　　　　　　　"title" : "jQuery 教程"
　　　　　　　　});
　　　　　　});

　　2. 添加和删除元素

　　　　append() - 在被选元素内部结尾插入内容.

　　　　prepend() - 在被选元素内部开头插入内容.

　　　　after() - 在被选元素之后插入内容.

　　　　before() - 在被选元素之前插入内容.

　　　　remove("选择器(可选参数)") - 无参：删除被选元素及其子元素，有参：可以用选择器过滤，该参数可以是任何 jQuery 选择器的语法.

　　　　empty() - 清空被选元素的子元素.

　　3. JQuery设置元素的样式

　　　　css("prrpertyname") - 如需返回指定的 CSS 属性的 RGB 值.

　　　　css("prrpertyname","value") - 设置指定的 CSS 属性.

　　　　css("prrpertyname":"value","prrpertyname":"value") - 设置多个 CSS 属性.

　　　　还有 addClass("css")、removeClass("css")、toggleClass("css")是指定已经写好的 CSS 属性.

　　4. 尺寸

　　　　widht() - 设置或返回元素的宽度(不包括内边距、边框或外边距).