jQuery学习3

最新推荐文章于 2023-06-27 11:13:49 发布

*胡二*

最新推荐文章于 2023-06-27 11:13:49 发布

阅读量113

点赞数 1

分类专栏： jQuery学习文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_45444864/article/details/104185972

版权

jQuery学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery知识点总结2

jQuery HTML

1.jQuery - 获得内容和属性
//使访问和操作元素和属性变得很容易

>text()----用来设置或返回所选元素的文本内容
>html()----用来设置或返回元素的内容（包含html标记）
>val()-----用来设置或返回表单字段的值
>attr()----获取属性

获取内容三种方式
>text()----用来设置或返回所选元素的文本内容
>html()----用来设置或返回元素的内容（包含html标记）
	text和html的区别：
	<script>
		$(document).ready(function(){
		  $("#btn1").click(function(){
		    alert("Text: " + $("#test").text());
		  });
		  //值为   这是段落中的粗体文本
		  $("#btn2").click(function(){
		    alert("HTML: " + $("#test").html());
		  });
		  //值为   这是段落中的<b>粗体</b>文本。
		});
	</script>
	
	</head>
	<body>
		<p id="test">这是段落中的<b>粗体</b>文本。</p>
		<button id="btn1">显示文本</button>
		<button id="btn2">显示 HTML</button>
	</body>
>val()-----用来设置或返回表单字段的值
	eg:
		$("#btn1").click(function(){
		  alert("Value: " + $("#test").val());
		});
>attr()----获取属性
	eg:
		$("button").click(function(){
	  alert($("#w3s").attr("href"));
	});

2.jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
eg:
	$("#btn1").click(function(){
	  $("#test1").text("Hello world!");
	});
	$("#btn2").click(function(){
	  $("#test2").html("<b>Hello world!</b>");
	});
	$("#btn3").click(function(){
	  $("#test3").val("Dolly Duck");
	});

text()、html() 以及 val() 的回调函数

	上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。
	回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
	然后以函数新值返回您希望使用的字符串。
	
	eg:
		$("#btn1").click(function(){
		  $("#test1").text(function(i,origText){
		    return "Old text: " + origText + " New text: Hello world!
		    (index: " + i + ")";
		  });
		});
		
		$("#btn2").click(function(){
		  $("#test2").html(function(i,origText){
		    return "Old html: " + origText + " New html: Hello <b>world!</b>
		    (index: " + i + ")";
		  });
		});
	
设置属性 - attr()
	eg:
		$("button").click(function(){
		  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
		});
		
	eg2:
		("button").click(function(){
		  $("#w3s").attr({
		    "href" : "http://www.w3school.com.cn/jquery",
		    "title" : "W3School jQuery Tutorial"
		  });
		});
		
attr() 的回调函数
	eg:
		$("button").click(function(){
		  $("#w3s").attr("href", function(i,origValue){
		    return origValue + "/jquery";
		  });
		});

3.jQuery - 添加元素

四个 jQuery 方法：
>append() - 在被选元素的结尾插入内容
	$("p").append("Some appended text.");
>prepend() - 在被选元素的开头插入内容
	$("p").prepend("Some prepended text.");
>after() - 在被选元素之后插入内容
	$("img").after("Some text after");
>before() - 在被选元素之前插入内容
	$("img").before("Some text before");

也可以创建好再追加
	eg:
		function appendText()
			{
				var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
				var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
				var txt3=document.createElement("p");  // 以 DOM 创建新元素
				txt3.innerHTML="Text.";
				$("p").append(txt1,txt2,txt3);         // 追加新元素
			}

4.jQuery - 删除元素

一般可使用以下两个 jQuery 方法：
>remove() - 删除被选元素（及其子元素）
	$("#div1").remove();
>empty() - 从被选元素中删除子元素
	$("#div1").empty();

 过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
eg：	
	$("p").remove(".italic");

5.jQuery - 获取并设置 CSS 类

	jQuery 拥有若干进行 CSS 操作的方法。
    >addClass() - ------向被选元素添加一个或多个类
    	eg:
    		$("button").click(function(){
			  $("h1,h2,p").addClass("blue");
			  $("div").addClass("important");
			});
		eg:
			$("button").click(function(){
			  $("#div1").addClass("important blue");
			});
    >removeClass() ---- 从被选元素删除一个或多个类
    	
    >toggleClass() ---- 对被选元素进行添加/删除类的切换操作
    	进行切换
    >css() - -----------设置或返回样式属性
		css() 方法设置或返回被选元素的一个或多个样式属性。
		eg:
			//返回属性值
				$("p").css("background-color");
			//设置属性
				$("p").css("background-color","yellow");
			//设置多个css属性
				$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery - 尺寸

几种方法
>width()
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
>height()
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
>innerWidth()
innerWidth() 方法返回元素的宽度（包括内边距）。
>innerHeight()
innerHeight() 方法返回元素的高度（包括内边距）。
>outerWidth()
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
>outerHeight()
outerHeight() 方法返回元素的高度（包括内边距和边框）。
>outerWidth(true)
outerWidth(true)方法返回元素的宽度（包括内边距、边框和外边距）。
>outerHeight(true)
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

jQuery - 更多的 width() 和 height()
下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
eg:
$(“button”).click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+=“x” + $(document).height() + “\n”;
txt+="Window width/height: " + $(window).width();
txt+=“x” + $(window).height();
alert(txt);
});

也可以设置指定的div元素的宽度和高度
eg:
$(“button”).click(function(){
$("#div1").width(500).height(500);
});
//注意：
设置值括号里面没有双引号

*胡二*

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习3

jQuery知识点总结2jQuery HTML1.jQuery - 获得内容和属性//使访问和操作元素和属性变得很容易>text()----用来设置或返回所选元素的文本内容>html()----用来设置或返回元素的内容（包含html标记）>val()-----用来设置或返回表单字段的值>attr()----获取属性获取内容三种方式>text()--...
复制链接

扫一扫