jQuery学习笔记2

一、获取并设置CSS类：

　　1、addClass( ) 方法：可以选取多个元素，也可以在该方法中规定多个类。

1 $("#div1").addClass("important blue");
2 $("h1,h2,p").addClass("blue");

　　2、removeClass( )方法：addClass( )方法类似

　　3、toggleClass( )方法：该方法对被选元素进行添加/删除类的切换操作

　　4、css( )方法：可以返回指定的css属性、设置css属性(可以设置多个)

1 console.log($("p").css("background-color")); // 输出css属性
2 $("p").css("background-color","yellow"); // 设置css属性
3 css({"propertyname":"value","propertyname":"value",...}); //设置多个css属性

二、尺寸（width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()、）

　　1、width() 返回元素的宽度（不包括内边距、边框或外边距）。

　　2、innerWidth()返回元素的宽度（包括内边距）。 padding

　　3、outerWidth() 方法返回元素的宽度（包括内边距和边框）。 padding、border

　　4、outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。padding、border、margin

　　5、高度与宽度类似.

三、遍历

　　1、祖先（parent()、parents()、parentsUntil()）

　　　　parent() 方法返回被选元素的直接父元素。

　　　　parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

　　　　parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

　　2、后代（child()、find()）

　　　　child()方法只会向下一级DOM树遍历，返回被选元素所有直接子元素。

　　　　find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

　　　　下面的例子返回属于 <div> 后代的所有 <span> 元素：$("div").find("span");

　　3、同胞（siblings()、next()、nextAll()、nextUntil()、）

　　　　siblings() 方法返回被选元素的所有同胞元素。

　　　　$("h2").siblings(); //返回<h2>的所有同胞元素

　　　　$("h2").siblings("p"); //返回<h2>的同胞元素的所有<p>元素

　　　　next() 方法返回被选元素的下一个同胞元素，该方法只返回一个元素。

　　　　nextAll() 方法返回被选元素的所有跟随的同胞元素。

　　　　nextUntil() 顾名思义，该方法返回介于两个给定参数之间的所有同胞元素。

　　4、过滤（first()、last()、eq()、filter()、not()）

　　　　 first() 方法返回被选元素的首个元素。下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

　　　　$("div p").first();

　　　　last() 方法返回被选元素的最后一个元素。下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

　　　　$("div p").last();　　　　　　　　　　　　eq()方法返回被选元素中带有指定索引号的元素,索引号从0开始。

　　　　$("p").eq(1);  //选取第二个 <p> 元素（索引号 1）　　　　　　　　filter()方法过滤掉不符合标准的元素　　　　（"p").filter(".intro").css("background-color","yellow"); //p元素中class为intro的元素背景色会变黄。　　　　　　　　not()方法过滤掉符合标准的元素　　　　（"p").not(".intro").css("background-color","yellow"); //p元素中class为intro的元素背景色不会变黄。


参考w3school

转载于:https://www.cnblogs.com/qianlihorse/p/4058539.html

jQuery学习笔记2相关推荐

jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素参数:expr(字符串,一个查询表达式或一段html字符串 ...
jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...

jQuery学习笔记2

jQuery学习笔记2相关推荐

最新文章

热门文章