jquery基础属性

最新推荐文章于 2025-04-08 19:16:28 发布
最新推荐文章于 2025-04-08 19:16:28 发布
阅读量136 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jquery 文章标签： jQuery JavaScript CSS HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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>

 

jQuery 基础语法
一个专注于机器学习基础与实战的技术博客，内容涵盖算法推导、模型实现、数学原理与代码实践。用通俗的语言解析复杂概念，记录学习过程中的思考与总结，适合机器学习爱好者和从业者参考。
02-27 2962
文章目录jQuery 基础语法一、 jQuery 概述1、 JS 库2、 jQuery 概念3、 jQuery 优点二、 jQuery 基本使用1、 jQuery 使用步骤2、 jQuery 入口函数3、 jQuery 顶级对象4、 jQuery 对象和 DOM 对象三、 jQuery 常用 API1、 jQuery 选择器2、 隐式迭代3、 jQuery 筛选选择器4、 jQuery 筛选方法5、 jQuery 里面的排他思想6、 链式编程四、 jQuery 样式操作1、 操作 CSS 方法2、 设置类样
jQuery基础知识汇总
z2431435的博客
08-25 2186
jQuery是一个快速、简洁的JavaScript框架。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery常用属性函数
m0_64455070的博客
06-19 3089
本文详细介绍了jQurey常用辅助函数及JQuery元素选择及事件处理。 jQuery常用属性函数1、.attr()2、.removeAttr（）3、.prop()4、.data()5、.val()6、.css（）
轻松掌握 jQuery 基础
不迁怒，不贰过。小知识，大智慧。
11-15 1258
jQuery是一个优秀的JavaScript框架，它能帮助用户更方便的处理HTML文件、事件、动画效果、AJAX交互等。它的出现极大程度地改变了开发者使用JavaScript的习惯。
jQuery基础——DOM
m0_54066656的博客
08-27 2491
JQ基础——DOM操作
语法篇JQuery基础
qq_62377885的博客
06-11 1396
jQuery是一个快速、简洁的JavaScript框架，它是John Resig在2006年创建的一个开源项目。它封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互。它的设计宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery基础 设置属性和属性值
weixin_45658984的博客
02-26 504
获取元素固定属性 element.prop(‘属性名’) 这个方法就是获取元素固有的属性值 比如 <a href="http://www.baidu.com" title="百度一下">百度</a> <script> $(function() { console.log($('a').prop('href'...
jQuery&ajax基础篇
qq_52265298的博客
12-12 1960
（依旧是学习记录，慢慢补充）
jQuery基础
m0_70693510的博客
04-08 1434
1、jQuery是一个JavaScript函数库。2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。3、jQuery库包含以下功能：HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和HTMLDOM遍历和修改。
jQuery基础知识总结
aDiaoYa_的博客
06-14 1366
浏览器注册页面—(通过js事件)—>Ajax引擎—(发送请求)—>服务器处理业务—(响应)—>Ajax引擎—(解析数据)—>注册页面
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第4天知识点：jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
07-18
总之，jQuery的节点操作、特殊属性操作和事件机制构成了其强大的功能基础，使开发者能高效地实现网页交互。结合Swiper这样的插件，可以构建出更加动态和吸引人的Web界面。学习和掌握这些知识点，对于提升Web开发技能...
基于Java医院药品管理系统论文
最新发布
08-12
基于Java医院药品管理系统论文
Kafka消息队列架构及高可用配置实战.doc
08-12
Kafka消息队列架构及高可用配置实战.doc
springboot基于Java的宠物用品系统的设计与实现.doc
08-12
springboot基于Java的宠物用品系统的设计与实现
接口逻辑电平标准.pptx
08-12
电路设计+接口逻辑电路+各种接口电平+学习和交流
JAVA某店POS积分管理系统(源代码+论文)
08-12
java
jQuery-Mobile基础教程：属性与用法解析
"这篇教程详细解析了jQuery-mobile的基础属性和用法，包括如何引入库、构建页面结构，以及实现全屏和标题居中等特性。适合初学者参考学习，提升移动应用开发技能。" 在移动Web开发中，jQuery-mobile是一个非常流行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值