jquery练习(一)

最新推荐文章于 2022-11-11 19:58:14 发布
最新推荐文章于 2022-11-11 19:58:14 发布
阅读量107 收藏
点赞数
文章标签： javascript ViewUI 




<!doctype html>
<html>
	<head>
		  <meta charset="utf-8">
	 
<script src="../js/libs/jquery-1.6.2.min.js"></script>
	</head>
	
	<body>
		<div>
		<p>字段单击事件1</p>
		<p>字段单击事件2</p>
		<p>字段单击事件3</p>
		</div>
		<hr />
		<!-- 表格1-->	
		<table border="1" >
			<tr>
				<td>第1个</td>
				<td>第2个</td>
			</tr>
			
			<tr>
				<td>第3个</td>
				<td>第4个</td>
			</tr>
			
			<tr>
				<td>第5个</td>
				<td>第6个</td>
			</tr>
			
			<tr>
				<td>第7个</td>
				<td>第8个</td>
			</tr>
			
			<tr>
				<td>第9个</td>
				<td>第10个</td>
			</tr>
		</table>
		
		
	<br />
	<hr />
		<!-- 表格2-->	
		<table border="1" >
			<tr>
				<td>第1个</td>
				<td>第2个</td>
			</tr>
			
			<tr>
				<td>第3个</td>
				<td>第4个</td>
			</tr>
			
			<tr>
				<td>第5个</td>
				<td>第6个</td>
			</tr>
			
			<tr>
				<td>第7个</td>
				<td>第8个</td>
			</tr>
			
			<tr>
				<td>第9个</td>
				<td>第10个</td>
			</tr>
		</table>
		
		
		<input type="button" id="b1" name="b1" value="button1" />
		<input type="button" id="b2" name="b2" value="button2" />
		
		
		<div title="nini">北京欢迎你</div>
		
		<hr />
		
		<div>
			<input type="text" name="stu1" id="stu2" value="不能编辑的文本框"disabled="disabled"/>
			
			<br />
			<select id="xuanze">
				<option value="2013">电视</option>
				<option value="2014">手机</option>
				<option value="2015">望远镜</option>
				<option value="2016">笔记本</option>
				<option value="2017">U盘</option>
			</select>
		</div>
		
		<input type="button" id="b4" name="b4" value="button4" />
		<p id="select2">获取下拉列表的值</p>
		
		
		<hr />
		
		<div class="wuxulibiao">
			<ul id="city2">
				<li id="1001">北京</li>
				<li id="1002">上海</li>
				<li id="1003">长沙</li>
				<li id="1004">杭州</li>
				<li id="1005" xuan="ninixixihaha">广州</li>	
			</ul>
			
			
			<ul id="city3">
				<li id="1006">香港</li>
				<li id="1007">澳门</li>
				<li id="1008">湖南</li>
				<li id="1009">洛阳</li>
			</ul>
			
		</div>

<p class="dobleclick">双击事件</p>
<input type="button" id="b5" name="b5" value="button5" />	


<hr />
<input type="button" id="b6" name="b6" value="button6" />	

<hr />
<input type="button" id="b7" name="b7" value="button7" />	


	</body>
</html>

<script type="text/javascript">
	
	/*$("p").each(function(index,domEle){
		$(domEle).click(function (){
			alert($(domEle).html());
		});
	});*/
	
	
	$("table:eq(0) tr:even").css("background","red");
	$("table:eq(1) tr:odd").css("background","green");
	
	$("#b1").click(function(){
		$("div[title='nini']").css("color","red");
	});
	
	/
	$("#b2").click(function(){
		$("div[title='nini']").css("color","black");
	});


    $("#b4").click(function(){
		$.each($("select option:selected"),function(index,domEle){
			alert($(this).val()+"====="+$(domEle).text());
		});
	});
	
	 $("#select2").click(function(){
		$.each($("#xuanze option:selected"),function(index,domEle){
			alert($(domEle).val()+"====="+$(domEle).html());
		});
	});
	
	
	$("#b5").click(function(){
		$(".dobleclick").append($("#city2"));
	});
	
	$(".dobleclick").click(function(){
		$(".dobleclick").append("123xixihaha你好吗？");
	});
	
	$("#b6").click(function(){
		alert($("#1005").attr("xuan"));
	});
	
	
	$("#b7").click(function(){
		var $tj=$("<li></li>");
		$tj.attr("id","1100");
		$tj.attr("key","xuannini");
		$tj.text("巴黎、伦敦");
		$("#city3").append($tj);
	});
	
	
</script>



运行效果：



iteye_8029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
jQuery练习
皮卡qiu~的博客
12-10 370
练习段落选中、文本隔行变色、返回选中复选框的个数
jQuery的几个小练习
paradoxzl的博客
07-14 596
学习jQuery过程中的小练习
jquery实例教学一
weixin_34129145的博客
01-12 685
jquery实例教学一 今天我们继续探讨jquery的相关内容。 首先，我们看看基本过滤选择器：                         一、选中单行或双行 能不能选中指定的某一个呢？   二、筛选大于，小于的   三、注意选择的顺序呦 :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClas...
10道JQuery的小练习
qq_40411946的博客
07-03 5769
期 末 复 习 的 10 道 jQuery 小练习 1.使用jquery修改div元素的背景色(随意颜色)&lt;body&gt; &lt;div&gt; &lt;/div&gt; &lt;script&gt; /* 1.使用jquery修改div元素的背景色(随意颜色) * * */ $('div').css('background',"...
jQuery的基础练习题
weixin_55834772的博客
11-11 418
('div.two').slideToggle(2000, 'linear', () => console.log('显示和隐藏完毕'))$('div.two').fadeTo(2000, 0.5, 'linear', () => console.log('显示和隐藏完毕'))$('div.two').fadeToggle(2000, 'linear', () => console.log('显示和隐藏完毕')).slideToggle() // 点击的哪个 li 下面的 ol。
前端jquery练习网页
最新发布
10-12
学生时代做的jquery网页，无后台，有bug
JQuery综合练习.docx
06-11
;"> <!-- 左边选择框 --> ;height:200px"> 北京">北京 上海">上海 南京">南京 杭州">杭州 深圳">深圳 <style>input{width:100px;... <input type="button" id="toRi
JQuery使用练习
09-26
本练习简单涉及到了JQuery选择器、事件、文档处理、函数、属性的使用
js 小项目练习，jQuery 小例子
04-10
js 小项目练习，jQuery 小例子。 使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。 jquery小项目
city.js 三级省市区城市数据js文件，js可以随时调用
03-04
city.js 三级省市区城市数据js文件，js可以随时调用，自用数据保留备份 export default[ {id: 1, name: '北京市', city: [ {id: 1, name: '北京市', district: [ {id: 1, name: '东城区'},
jquery练习
12-16
jquery练习
JQuery练习题1
05-10
jQuery练习题1
JQuery基础练习
qq_39095899的博客
04-03 251
Jquery练习 基本选择器练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery基本选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript" c...
jQuery常用方法和练习例子
08-20 167
要点：1、jQuery方法内置循环:$('div').css('backgroundColor','red'):给所有DIV标签添加红色背景2、this出现在jQuery的function中，代表循环时，当前正在处理的DOM对象3、$(this)，把当前DOM对象转换在JQuery，以便使用jQuery方法4、隐式条件判...
Jquery练习题
small_qianzai的博客
09-19 1768
1.使用jquery修改div元素的背景色(随意颜色) 第一个已点击第二个未点击 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.min.js">...
JQuery练习案列
m0_71467744的博客
10-13 392
内部实现事件函数，并采用类选择器，将表中复选框的checked属性值设置为与当前复选框的值一样。在
jquery课后练习
09-04
可以使用以下步骤来实现页面中div元素向右运动100px后回到初始位置的动画效果： 1. 在页面中引入jQuery库。 2. 声明一个按钮元素和一个div元素，在div元素的样式中设置初始位置、背景颜色、宽度和高度。 3. 使用jQuery的click()方法为按钮元素添加点击事件处理程序。 4. 在事件处理程序中使用animate()方法来实现div元素向右移动100px的动画效果。在animate()方法中设置要改变的CSS属性（left）和动画持续时间（500毫秒）。 5. 再次使用animate()方法，设置div元素回到初始位置（left: 0）的动画效果。 以下是实现以上功能的jQuery代码示例： ```javascript $("button").click(function () { $("div").animate({ left: 100, }, 500); $("div").animate({ left: 0, }, 500); }); ``` 注意：在使用这段代码之前，需要确保已经正确引入了jQuery库。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [十、jQuery（上） - 章节课后练习题及答案](https://blog.csdn.net/weixin_57002282/article/details/125208920)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值