jQuery设置内容和属性

jQuery设置内容和属性


一、设置内容以及回调函数


方法

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

例子

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});//设置文本内容
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});//设置元素内容
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});//设置值
$("#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 + ")";
  });
});//返回元素内容

TIPS

回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。


二、设置属性以及回调函数


方法

  • attr() - 设置属性值

例子

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});//设置单个属性

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});//设置多个属性
$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});//回调函数

总代码

<!doctype html>
	<head>
	<title>jq设置内容和属性</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#bt1").click(function(){
				$("#p1").text("hello world1!");
			});
			$("#bt2").click(function(){
				$("#p2").html("<h1>hello world2!</h1>");
			});
			$("#bt3").click(function(){
				$("#t1").val("hello world3!");
			});
			$("#bt4").click(function(){
				$("#p1").text(function(i,origText){
					return "旧文本:"+origText+"新文本:这是新文本(index:"+i+")"
				});
			});
			$("#bt5").click(function(){
				$("#p2").html(function(i,origText){
					return "旧HTML:"+origText+"新HTML:<b>这是新HTML</b>(index:"+i+")"
				});
			});
			$("#bt6").click(function(){
				$("#t1").val(function(i,origText){
					return "旧值:"+origText+"新值:这是新值(index:"+i+")"
				});
			});
			$("#bt7").click(function(){
				$("a").attr("href","https://tieba.baidu.com");
			});
			$("#bt8").click(function(){
				$("a").attr("href",function(i,origValue){return origValue + "/s?wd=1&rsv_spt=1&rsv_iqid=0xbc3b96600002e5f4&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=163&rsv_sug4=1686"});
			});
		});
	</script>
	</head>

	<body>
		<input type="button" id="bt1" value="设置文本" "">
		<input type="button" id="bt2" value="设置HTML" "">
		<input type="button" id="bt3" value="设置值" "">
		<p id="p1">这是文本</p>
		<p id="p2">这是HTML</p>
		<p>这是:<input type="text" value="值" id="t1" style ="width:500px"></p>
		<input type="button" id="bt4" value="显示旧/新文本" "">
		<input type="button" id="bt5" value="显示旧/新HTML" "">
		<input type="button" id="bt6" value="显示旧/新值" "">
		<hr><!--以上是设置内容,一下是设置属性-->
		<input type="button" id="bt7" value="改变href值为贴吧" "">
		<p><a id="baidu" href="https://www.baidu.com" target="_blank">百度</a></p>
		<input type="button" id="bt8" value="改变href值为搜索1(回调函数)" "">
	</body>
</html>
  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 您可以使用 jQuery 的 `.css()` 方法来设置 CSS `transform` 属性,从而实现旋转效果。 例如,要将元素旋转45度,可以使用以下代码: ```javascript $(selector).css({ 'transform': 'rotate(45deg)' }); ``` 其中,`selector` 是您要旋转的元素的选择器,可以是任何有效的 CSS 选择器,例如元素的类名、ID 或标签名。 这里的 `rotate(45deg)` 是 CSS `transform` 属性的值,表示将元素沿顺时针方向旋转45度。您可以根据需要修改旋转角度。 ### 回答2: 使用jQuery可以通过设置css的transform属性来实现元素的旋转效果。 首先需要选中要旋转的元素,可以通过选择器选中元素的class名或者id名。 然后使用css()方法来设置元素的transform属性属性值为rotate()函数,给定旋转角度。 例如,要将id为"box"的元素顺时针旋转45度,可以使用以下代码: ``` $("#box").css("transform", "rotate(45deg)"); ``` 如果要在原有的旋转基础上再次旋转,可以先获取当前的旋转角度,然后在原有的角度基础上进行增加或减少。 示例如下: ``` var rotate_angle = $("#box").css("transform"); //获取当前的旋转角度 var current_angle = parseFloat(rotate_angle.replace('rotate(', '').replace('deg)','')); //将字符串转为数值 var new_angle = current_angle + 45; //在原有的角度基础上增加45度 $("#box").css("transform", "rotate("+ new_angle +"deg)"); //设置新的旋转角度 ``` 以上就是jQuery设置元素旋转属性的方法,通过设置transform属性可以实现元素的旋转效果。 ### 回答3: 在jQuery设置CSS旋转属性可以使用css()方法。要设置旋转角度,需要使用transform属性,并在其值中添加rotate()函数。具体的步骤如下: 1. 选择要设置旋转属性的元素。可以使用jQuery选择器来选择元素,例如通过元素的ID或类名选择。 2. 使用css()方法来设置旋转属性。该方法参数中的第一个参数为要设置的CSS属性,第二个参数为属性的值。 3. 在设置旋转属性时,使用transform属性,并在其值中添加rotate()函数。rotate()函数的参数为旋转的角度,可以是正数或负数。例如,rotate(45deg)表示向顺时针方向旋转45度。 4. 最后,调用css()方法来设置旋转属性,将transform属性和旋转角度作为参数传递进去。 示例代码如下: ```javascript // 选择要旋转的元素 var element = $("#myElement"); // 设置旋转属性 element.css("transform", "rotate(45deg)"); ``` 以上代码将选中的元素旋转45度,可以根据需要更改代码中的选择器和旋转角度来实现不同的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值