jquery操作dom

来源：互联网发布：控制算法有哪些编辑：程序博客网时间：2024/06/06 20:50

<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" onblur="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>

0 0