jquery操作dom

最新推荐文章于 2020-12-21 16:57:11 发布

katy的小乖

最新推荐文章于 2020-12-21 16:57:11 发布

阅读量287

点赞数

分类专栏： javaWeb 文章标签： jquery_dom

本文链接：https://blog.csdn.net/u010918487/article/details/50119611

版权

javaWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		var textName = document.getElementsByName("username")[0].value;
		// 获取下标为1的文本框的值</span>

<span style="font-size:18px;">                //</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">:input[name='username']:表示所有name属性值为username的文本框</span><span style="font-size:18px;">
		var $textName = $(":input[name='username']:eq(1)").val();
		// 获取所有文本框的值
		var $names = $("[type='text']");
		// 定义接收所有文本框值得变量
		var values = "";
		$names.each(function(index,element) {
			//values+=$(this).val()+"  ";
			// 把dom对象转换为jQuery对象
			var $obj = $(element);
			//console.log($obj);
			// 把jQuery对象转换为Dom对象
			var el = $obj[0];
			//console.log(el.value);
			//alert(index+","+$obj.val());
		});
		//console.log(values);
		//alert(textName+"=="+$textName);
		
		$(":button").click(function() {
			// 创建层对象
			var $div = $("<div>");
			//如果该"层"对象的下一个节点是div,就将该对象的下一个div移除
			if($(this).next("div")) {
				$(this).next("div").remove();
			}
			
			// 设置层的样式
			$div.css({"border":"1px solid red"
				,"width":"350px"
				,"height":"200px"
				,"background":"#DDDDDD"
				,"position":"absolute"
				,"z-index":"1000"});
			<span style="background-color: rgb(102, 255, 255);">// 获取当前浏览器的可用宽度和高度
			var width = window.innerWidth;
			var height = window.innerHeight;
			var divX = width/2-$div.width()/2;//x方向居中
			var divY =height/2-$div.height()/2;//y方向居中</span>
			// 定位层
			$div.css("top",divY+"px").css("left",divX+"px");
			// 加阴影
			$div.css("box-shadow","2px 2px");
			// 把当前层对象追加到点就按钮的后面
			$div.insertAfter($(this));
		});
		
	});
	
	function checkText(tx) {
		var $input  = $(tx);
		var $span = $("<span><font color='red'>用户名不能为空！</font></span>");
		var $nextObj = $input.next(); 
		if($nextObj.html().indexOf($span.html())>-1) {
			$nextObj.remove();
		}
		//var $input  = $(tx);
		/* var span = document.createElement("span");
		span.innerHTML="<font color='red'>用户名不能为空！</font>";
		tx.parentNode.insertBefore(tx,span); */
		$span.insertAfter($input);
		
	}
</script>
</head>
<body>
	<input type="text" name="username" value="我是一个文本框" />
	<input type="text" name="username" οnblur="checkText(this);" value="我是一个文本框1" />
	<input type="text" name="username" value="我是一个文本框2" />
	<input type="text" name="username" value="我是一个文本框3" />
	
	<input type="button" value="弹出窗口" name="弹出窗口" />
</body>
</html></span>

katy的小乖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery操作dom

Insert title here $(function() { var textName = document.getElementsByName("username")[0].value; // 获取下标为1的文本框的值 //:input[name='username']:表示所有name属性值为username的文本框 var $textNa
复制链接

扫一扫