jquery基础属性

最新推荐文章于 2024-06-19 19:53:31 发布
最新推荐文章于 2024-06-19 19:53:31 发布
阅读量115 收藏
点赞数
分类专栏： jquery 文章标签： jQuery JavaScript CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shamusoft/article/details/83941441
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
		 </ul>
		
	</body>
<script language="JavaScript">
	//在city下增加<li id="tj" name="tianjin">天津</li>节点
	
	  var $liEle = $("<li></li>");
	  $liEle.attr("id","tj");
	  $liEle.attr("name","tianjing");
	  $liEle.text("天津");
	  $("#city").append($liEle);
	 
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		   .one{
			    width: 200px;
			    height: 140px;
			    margin: 40px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
		
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="采用属性增加样式"  id="b1"/>
		 <input type="button" value=" addClass"  id="b2"/>
		 <input type="button" value="removeClass"  id="b3"/>
		 <input type="button" value=" 切换样式"  id="b4"/>
		 <input type="button" value=" hasClass"  id="b5"/>
		
 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one    ***********
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div>
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		<span class="spanone">    span
		</span>
		
	</body>
<script language="JavaScript">
//<input type="button" value="采用属性增加样式"  id="b1"/>
$("#b1").click(function(){
	$("#one").attr("class","one");
});

//<input type="button" value=" addClass"  id="b2"/>
$("#b2").click(function(){
	$("#one").addClass('one');
});

//<input type="button" value="removeClass"  id="b3"/>
$("#b3").click(function(){
	$("#one").removeClass('one');
});

//<input type="button" value=" 切换样式"  id="b4"/>
$("#b4").click(function(){
	$("#one").toggleClass("one");
});


//<input type="button" value=" hasClass"  id="b5"/>
$("#b5").click(function(){
	/**
	 * 判断是否有class这个属性
	 */
		alert($("#one").hasClass("one"));
});
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	<body>
		<button>保存</button>	<br>	<br>	<br>	
	    <p>段落</p>
	</body>
    <script language="JavaScript">
         //button增加事件
		 $("button").click(function(){
		 	alert("按钮事件");
		 });
		
	
	    //克隆button 追加到p上 ,但事件不克隆
	     
//	   $("button").clone().appendTo("p");
	   
	    //克隆button 追加到p上 ,但事件也克隆
	    $("button").clone(true).appendTo("p");
	
	
    </script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->    
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 
		 
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		
		<div id="foo1">Hello1</div> 
       
	</body>
<script language="JavaScript">
//append(content) :向每个匹配的元素的内部的结尾处追加内容
//	  $("#city").append($("#fk"));
  $("#city").append("<li>））））</li>");
//appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
  

//prepend(content):向每个匹配的元素的内部的开始处插入内容
 
 $("#city").prepend("<li>前面插入</li>");
//prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
	$("#xj").prependTo($("#city"));
	 
</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->    
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		
		 <p  id="p3">I would like to say: p3</p>
		 
		 <p  id="p2">I would like to say: p2</p>
		
		 <p  id="p1">I would like to say: p1</p>
       
	</body>
<script language="JavaScript">
//*  after(content) :在每个匹配的元素之后插入内容
//    $("#city").after($("#p1"));

//*  before(content):在每个匹配的元素之前插入内容 
     
//	$("#cq").before($("#p1"));
//*  insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面 
     $("#p1").insertAfter($("#city"));
   
//*  insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
    $("#p1").insertBefore($("#city"));
   
 

</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		<p class="hello">Hello</p> how are <p>you?</p> 
	</body>
<script language="JavaScript">

   //删除<li id="bj" name="beijing">北京</li>
	$("#bj").remove();

   //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
   $("#city").empty();
  
   //测试

	alert($("#bj").value);

</script>
   
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	<body>
		<button>保存</button>	<br>	<br>	<br>	
	    <p>段落</p>
		<p>段落</p>
		<p>段落</p>
	
	</body>
<script language="JavaScript">
	
	    //$("button")用 <p>tttttttt</P>替换
         //$("p").replaceWith("<button>保存</button>");	
	
	    // p 用  <button>保存</button>  替换
		$("<button>保存</button>").replaceAll($("p"));
	
</script>
   
</html>

 

shamusoft
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery属性
weixin_57752568的博客
08-26 323
Jquery属性 1.attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。 name属性名称 properties作为属性的“名/值对”对象 key,value属性名称，属性值 key,function(index, attr) 1:属性名称。 2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。 2. removeAttr(name) 从每一个匹配的元素中删除一个属性 1.6以下版本在IE6使用JQuery的r
jQuery 属性操作
qq_39368007的博客
11-29 145
jQuery 属性操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
jQuery常用属性函数
m0_64455070的博客
06-19 1035
获取或设置备选元素的属性值。 2、.removeAttr（） 功能： 从被选元素中移出一个或多个属性。$(selector).removeAttr(attributeName) 3、.prop() 功能: 获取或设置被选元素的属性值，特别适用于某些具有布尔值的属性，如 、 和 。 注意：对于大多数属性， 和 可以互换使用，但 更适合处理那些表示 DOM 元素状态的属性，如 、 和 。在指定的元素上存储和检索数据，这些数据是私有的，不会影响元素的 DOM 结构。 5、.val()
JQuery基础内容
qq_43668183的博客
05-07 546
JQueryJQuery 基础：1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器：筛选具有相似特征的元素(标签)5. DOM操作 JQuery 基础： 1. 概念 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装Jav
轻松掌握 jQuery 基础
不迁怒，不贰过。小知识，大智慧。
11-15 1123
jQuery是一个优秀的JavaScript框架，它能帮助用户更方便的处理HTML文件、事件、动画效果、AJAX交互等。它的出现极大程度地改变了开发者使用JavaScript的习惯。
jquery-mobile基础属性与用法详解
10-21
本篇文章将详细解析 jQuery Mobile 的基础属性与用法。 首先，引入 jQuery Mobile 的库文件是至关重要的。在 HTML 文件中，你需要引入 CSS、jQuery 本身以及 jQuery Mobile 的 JavaScript 文件。以下是一个基本的...
JQuery中属性过滤选择器用法实例分析
12-03
1. **基础属性选择器**: `div[id]` 这个选择器用来匹配具有指定属性的元素。在例子中，`div[id]` 会选择所有拥有 "id" 属性的 `div` 元素。 2. **属性等于值选择器**: `div[myTag='tt2']` 选择器`div[myTag='tt...
jQuery基础
12-10
例如，可以使用jQuery来改变元素的类名、内容和属性等。 3. CSS操作：jQuery允许开发者以一种直观和简洁的方式动态地改变CSS样式。开发者可以轻松地获取和设置元素的样式属性，实现丰富的页面效果。 4. HTML事件...
jQuery第4天知识点：jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
07-18
总之，jQuery的节点操作、特殊属性操作和事件机制构成了其强大的功能基础，使开发者能高效地实现网页交互。结合Swiper这样的插件，可以构建出更加动态和吸引人的Web界面。学习和掌握这些知识点，对于提升Web开发技能...
华为智慧城市成功案例集
08-29
华为智慧城市成功案例集
小程序-仁怀酱酒宝：酒类商城模板（源码）.zip
最新发布
08-29
小程序-仁怀酱酒宝：酒类商城模板（源码）.zip
剑雅真题G类雅思官方指南OG剑雅真题G类雅思官方指南OG
08-29
剑雅真题G类雅思官方指南OG剑雅真题G类雅思官方指南OG提取方式是百度网盘分享地址
基于微信小程序的点餐系统的设计设计与实现.docx
08-29
基于微信小程序的点餐系统的设计设计与实现.docx
lesson47-RNN原理.zip
08-29
深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT深度学习与PyTorch入门实战视频教程 配套源代码和PPT
机器学习知识教程.ppt
08-29
内容概要：本资源深入探讨了机器学习的基础概念、发展历程、学习系统的特点以及多种学习方法。通过具体的示例和算法案例，引导读者理解机器学习的核心原理和应用实践，涵盖了从机械式学习到基于解释的归纳学习等不同层次的学习策略。 适合人群：适合计算机科学、人工智能、数据科学等专业的在校学生，以及对机器学习感兴趣的研发人员和行业从业者。特别适合那些希望建立扎实机器学习理论基础并了解其应用的研究者和开发者。 能学到什么： 1. 机器学习的定义、重要性和在人工智能中的核心地位。 2. 机器学习的发展历史，包括热烈时期、冷静时期、复兴时期和蓬勃发展时期。 3. 机器学习系统的组成要素、特征和基本模型。 4. 机器学习的分类方法，包括按学习策略、知识表示方法和应用领域等。 5. 各种机器学习策略，如机械学习、传授学习、演绎学习、归纳学习、类比学习和基于解释的学习。 6. 双空间模型和变型空间法在示例学习中的应用，以及决策树算法的原理和构建过程。 阅读建议：此资源不仅涵盖了机器学习的基础理论知识，还包含了丰富的示例和练习，帮助读者更好地理解和掌握机器学习的关键概念和技术。在学习的过程中，建议读者结合实际
mt.exe
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
九齐单片机 NY8-Example-Code 程序模板
08-29
九齐单片机 NY8_Example_Code 程序模板
RIIL产品普教校园解决方案（锐捷）PPT(30页).pptx
08-29
智慧校园建设方案旨在通过融合先进技术，如物联网、大数据、人工智能等，实现校园的智能化管理与服务。政策的推动和技术的成熟为智慧校园的发展提供了基础。该方案强调了数据的重要性，提出通过数据的整合、开放和共享，构建产学研资用联动的服务体系，以促进校园的精细化治理。 智慧校园的核心建设任务包括数据标准体系和应用标准体系的建设，以及信息化安全与等级保护的实施。方案提出了一站式服务大厅和移动校园的概念，通过整合校内外资源，实现资源共享平台和产教融合就业平台的建设。此外，校园大脑的构建是实现智慧校园的关键，它涉及到数据中心化、数据资产化和数据业务化，以数据驱动业务自动化和智能化。 技术应用方面，方案提出了物联网平台、5G网络、人工智能平台等新技术的融合应用，以打造多场景融合的智慧校园大脑。这包括智慧教室、智慧实验室、智慧图书馆、智慧党建等多领域的智能化应用，旨在提升教学、科研、管理和服务的效率和质量。 在实施层面，智慧校园建设需要统筹规划和分步实施，确保项目的可行性和有效性。方案提出了主题梳理、场景梳理和数据梳理的方法，以及现有技术支持和项目分级的考虑，以指导智慧校园的建设。 最后，智慧校园建设的成功依赖于开放、协同和融合的组织建设。通过战略咨询、分步实施、生态建设和短板补充，可以构建符合学校特色的生态链，实现智慧校园的长远发展。
2024-2025学年第一学期2024级新生选课及相关事项的通知.zip
08-29
2024-2025学年第一学期2024级新生选课及相关事项的通知.zip
jQuery基础与选择器教程
"jQuery基础+选择器.pdf 是一本关于jQuery的入门教程，涵盖了jQuery的基本用法和选择器的详细讲解。作者是前端开发者王子墨，该书提供了丰富的前端开发知识，适合初学者学习jQuery框架。" jQuery是一个轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值