$工具方法：

1.$each(Object,Function)：遍历数组、对象、对象数组中的数据

2.$trim(str)：去除字符串两边的空格

3.$type(obj)：检测obj的数据类型

4.$isArray(obj)：测试对象是否为数组

5.$isFunction(obj)：测试对象是否为函数

6.$parseJSON(json)：接受一个JSON字符串，返回解析后的对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>//$each(Object,Function)：遍历数组、对象、对象数组中的数据$.each( [0,1,2], function(i, n){console.log( "$each：Item #" + i + ": " + n )})$.each( { name: "JQuery", lang: "JS" }, function(i, n){console.log( "$each：Name: " + i + ", Value: " + n )})//$trim(str)：去除字符串两边的空格console.log($.trim("  hello, how are you?  "));console.log("  hello, how are you?  ");//$type(obj)：检测obj的数据类型console.log("$type："+$.type(true));console.log("$type："+$.type(3));console.log("$type："+$.type("test"));console.log("$type："+$.type(function () {}));console.log("$type："+$.type([]));console.log("$type："+$.type(new Date()));console.log("$type："+$.type(/test/));//$isArray(obj)：测试对象是否为数组console.log("isArray："+$.isArray([1, 2, 3]));console.log("isArray："+$.isArray(2));//$isFunction(obj)：测试对象是否为函数function stub() {}var objs = [function () {},{ x:15, y:20 },null,stub,"function"];jQuery.each(objs, function (i) {console.log("isFunction："+objs[i]+"结果："+$.isFunction(objs[i]));});//$parseJSON(json)：接受一个JSON字符串，返回解析后的对象console.log($.parseJSON('{"name":"JQuery"}').name==="JQuery");
</script>
</body>
</html>

效果如下：

jQuery属性：

1.attr(name|properties|key,value|fn)：设置或返回被选元素的属性值

<script src="js/jquery-3.5.1.min.js"></script>
//返回文档中所有图像的src属性值
$("img").attr("src");
//为所有图像设置src和alt属性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });
//为所有图像设置src属性。
$("img").attr("src","test.jpg");
//把src属性的值设置为title属性的值。
$("img").attr("title", function() { return this.src });

2.removeAttr(name)：从每一个匹配的元素中删除一个属性

<script src="js/jquery-3.5.1.min.js"></script>
//将文档中图像的src属性删除
$("img").removeAttr("src");

3.addClass(class|fn)：为每个匹配的元素添加指定的类名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul><li>Hello</li><li>Hello</li><li>Hello</li>
</ul>
<script>//为匹配的元素加上 'selected' 类$("p").addClass("selected");$("p").addClass("selected1 selected2");//给li加上不同的class$('ul li:last').addClass(function() {return 'item-' + $(this).index();});
</script>
</body>
</html>

4.removeClass([class|fn])：从所有匹配的元素中删除全部或者指定的类

<script src="js/jquery-3.5.1.min.js"></script>
//从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");
//删除匹配元素的所有类
$("p").removeClass();
//删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {return $(this).prev().attr('class');
});

5.prop(name|properties|key,value|fn)：获取在匹配的元素集中的第一个元素的属性值

prop()与attr()类似，区别在于prop用于属性值为Booleean类型的，比如多选

<script src="js/jquery-3.5.1.min.js"></script>
//选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");
//禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled: true
});
//禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
//通过函数来设置所有页面上的复选框被选中。
$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;
});

6.html([val|fn])：取得第一个匹配元素的html内容

<script src="js/jquery-3.5.1.min.js"></script>
//返回p元素的内容。
$('p').html();
//设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");
//使用函数来设置所有匹配元素的内容。
$("p").html(function(n){return "这个 p 元素的 index 是：" + n;
});

7.text([val|fn])：取得所有匹配元素的内容

<script src="js/jquery-3.5.1.min.js"></script>
//返回p元素的文本内容。
$('p').text();
//设置所有 p 元素的文本内容
$("p").text("Hello world!");
//使用函数来设置所有匹配元素的文本内容。
$("p").text(function(n){return "这个 p 元素的 index 是：" + n;
});

8.val([val|fn|arr])：获得匹配元素的当前值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<select id="single"><option>Single</option><option>Single2</option>
</select>
<select id="multiple" multiple="multiple"><option selected="selected">Multiple</option><option>Multiple2</option><option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
<script>//获取文本框中的值$("input").val();//设定文本框的值$("input").val("hello world!");//设定文本框的值$('input:text.items').val(function() {return this.value + ' ' + this.className;});//设定一个select和一个多选的select的值$("#single").val("Single2");$("#multiple").val(["Multiple2", "Multiple3"]);$("input").val(["check2", "radio1"]);
</script>
</body>
</html>

CSS：

1.css(name|pro|[,val|fn])：访问匹配元素的样式属性（也可以修改css样式）

<script src="js/jquery-3.5.1.min.js"></script>
//取得第一个段落的color样式属性的值。
$("p").css("color");
//将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "color": "#ff0011", "background": "blue" });
//将所有段落字体设为红色
$("p").css("color","red");
//逐渐增加div的大小
$("div").click(function() {$(this).css({width: function(index, value) {return parseFloat(value) * 1.2;}, height: function(index, value) {return parseFloat(value) * 1.2;}});
});

2.offset([coordinates])：获取匹配元素在当前视口的相对偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第二段的偏移（无参）var p = $("p:last");var offset = p.offset();p.html( "left: " + offset.left + ", top: " + offset.top );//获取第二段的偏移（参数coordinates）$("p:last").offset({ top: 10, left: 30 });
</script>
</body>
</html>

3.position()：获取匹配元素相对父元素的偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段的偏移var p = $("p:first");var position = p.position();$("p:last").html( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>

4.scrollTop([val])：获取匹配元素相对滚动条顶部的偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段相对滚动条顶部的偏移var p = $("p:first");$("p:last").text( "scrollTop:" + p.scrollTop() );//设置相对滚动条顶部的偏移$("div.demo").scrollTop(300);
</script>
</body>
</html>

5.scrollLeft([val])：获取匹配元素相对滚动条左侧的偏移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段相对滚动条左侧的偏移var p = $("p:first");$("p:last").text( "scrollLeft:" + p.scrollLeft() );//设置相对滚动条左侧的偏移$("div.demo").scrollLeft(300);
</script>
</body>
</html>

6.width([val|fn])：取得第一个匹配元素当前计算的宽度值（px）

<script src="js/jquery-3.5.1.min.js"></script>
//获取第一段的宽
$("p").width();
//把所有段落的宽设为 20:
$("p").width(20);
//以 10 像素的幅度增加 p 元素的宽度
$("button").click(function(){$("p").width(function(n,c){return c+10;});
});

7.height([val|fn])：取得匹配元素当前计算的高度值（px）

<script src="js/jquery-3.5.1.min.js"></script>
//获取第一段的高
$("p").height();
//把所有段落的高设为 20:
$("p").height(20);
//以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){$("p").height(function(n,c){return c+10;});
});

8.innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段落内部区域宽度。var p = $("p:first");$("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
</body>
</html>

9.innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段落内部区域高度。var p = $("p:first");$("p:last").text( "innerHeight:" + p.innerHeight() );
</script>
</body>
</html>

10.获取第一个匹配元素外部宽度（默认包括补白和边框）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段落外部宽度。var p = $("p:first");$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
</script>
</body>
</html>

11.outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>//获取第一段落外部高度。var p = $("p:first");$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
</script>
</body>
</html>

本文到此为止，接下来小编还会写一些关于jQuery内容的博客，如果有喜欢的话，希望可以给予小编三连（点赞、收藏+关注）

jQuery$工具属性CSS相关推荐

【第一章】 jQuery入门---选择器 and $工具属性CSS
jQuery1:入门知识--选择器 3W1H What?是什么? JavaScript库:封装了很多JS代码 JavaScript库:jQuery(90%).E ...
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
Tailwind CSS 是一个工具集 CSS 框架
Tailwind CSS 是一个工具集 CSS 框架, 助你快速实现定制化的网站设计. Tailwind CSS 是一个高度可定制的基础层 CSS 框架,它为您提供了构建定制化设计所需的所有构建块,而 ...
jQuery DOM/属性/CSS操作
jQuery DOM 操作创建元素只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构 1 回顾 1.1 列表 ul ol li dl dt dd 1.2 表格 table caption thead tfoot tbo ...
字体系列之字体复合属性(CSS、HTML)
字体系列之字体复合属性(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

jQuery$工具属性CSS

jQuery$工具&属性&CSS

$工具方法：

jQuery属性：

CSS：

jQuery$工具属性CSS相关推荐

最新文章

热门文章