jQuery_基础三 _Web前端

jQuery_基础3

<script type="text/javascript" src="jquery-1.4.4.js"></script>
  <script type="text/javascript">

  $(function()
  {
	var p = $("p");//有这样一种命名规范:jquery对象命名  $p 加一$符号 表示jquery对象  不加表示dom对象
    var li = $("ul li:eq(1)");//第二个li

	var title = p.attr("title");//attr();一个参数:属性的名字返回属性的值(读操作).  两个参数:属性的name属性的值,写入操作
    //上面那句=p[0].title//取得tilte属性的值
	var title2 = li.attr("title");
	var text = li.text();

    alert(title);
	alert(title2);
	alert(text);

	li.attr("title", "myTitle");//传两个参数就是写操作

  });
  </script>
 </head>
 <body>
 <p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
	 <li title="1">好</li>
	 <li title="2">很好</li>
	 <li title="3">非常好</li>
	 <li title="4">特别好</li>
	 <li title="5">太好了</li>
	 <li title="6">好的无法描述了</li>
</ul>
 </body>

 var addItems = function()
  {
  /*
    document.getElementById("div1").innerHTML = "";//最快的清空方式.每次appendChild之前清空.也可以用remove方法
    //但是innerHTML=""  最佳实践

	var value = parseInt(document.getElementById('itemsNumber').value);

	for(var i = 0; i < value; i++)
	{
		//参数:标签的名字
		var input = document.createElement("input");
		//设置属性,什么样的input.
		input.setAttribute("type", "text");

		var br = document.createElement("br");

		document.getElementById("div1").appendChild(input);//往div1标签下附加子元素
		document.getElementById("div1").appendChild(br);//这些JS的操作不会反馈到右键查看源代码
		//可以通过firebug查看,右键源代码不会显示附加的代码
		
	}
*/
    document.getElementById("div1").innerHTML = "";
    var value = parseInt($("#itemsNumber").val());

	var str = "";

	for(var i = 0; i < value; i++)
	{
		str += "<input type='text'><br>";
	}

	$("#div1").append(str);

  }
  </script>
 </head>
 <body>
 <input type="text" id="itemsNumber"> 
 <input type="button" id="btn" value="click" onclick="addItems();">
<div id="div1"></div>
 </body>

 <script type="text/javascript" src="jquery-1.4.4.js"></script>
  <script type="text/javascript">

   $(function()
   {
	   //附加两条li到后面
    $("ul").append("<li title='abc'>hello</li>")
	       .append("<li title='xyz'>world</li>");
//第二种写法  附加一条li到后面
$("<li title='abc'>hello</li>").appendTo($("ul"));
   });
  </script>
 </head>
 <body>
<p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
$(function()
{
	var li1 = $("<li title='hello'>hello</li>");
	var li2 = $("<li title='hello'>world</li>");
	var li3 = $("<li title='hello'>hello world</li>");

	//附加到最后一个li后面
	$("ul").append(li1);

	//附加到第一个li前面
	$("ul").prepend(li2);

	//附加到指定位置
    $("ul li:eq(4)").after(li3);

});
</script>
 </head>
 <body>
<p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
$(function()
{
	//将第3个节点插入到第5个节点后
	$("ul li:eq(2)").insertAfter("ul li:eq(4)");
});
</script>
 </head>
 <body>
<p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
$(function()
{
	//remove方法会返回被移除的节点的jQuery对象
	var removedLi = $("ul li:eq(3)").remove(); 

	removedLi.appendTo($("ul"));

	//$("ul li"):获得后代元素
	//$("ul li").remove("li[title != 2]");

	$("ul li:eq(3)").empty(); //清空元素中的内容

});
</script>
 </head>
 <body>
 <p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
/*
var addMore = function()
{
	var div = document.getElementById("div1");

	var br = document.createElement("br");
	var input = document.createElement("input");
	var button = document.createElement("input");

	input.setAttribute("type", "file");
	button.setAttribute("type", "button");
	button.setAttribute("value", "Remove");

	//每次删除的对象不一样.  删除当前对象
    button.onclick = function()
	{
		div.removeChild(br);
		div.removeChild(input);
		div.removeChild(button);//把自己也要删除掉
	}

	div.appendChild(br);
	div.appendChild(input);
	div.appendChild(button);
}
*/

var count = 0;
$(function()
{
	$("input[type=button]").click(function()
	{
		var br = $("<br>");
		var input = $("<input type='file'>");
		var button = $("<input type='button' value='Remove" + (++count) + " '>");

		$("#div1").append(br).append(input).append(button);

		button.click(function()
		{
			br.remove();
			input.remove();
			button.remove();
		});
	});
});

</script>
 </head>
 <body>
<input type="file"> <input type="button" value="more...">
<div id="div1"></div>
 </body>

<script type="text/javascript">
 $(function()
 {
	$("ul>li").click(function()
	{
		//当前对象赋值一份附加到ul上面
		//this:当前所用的对象
		//$(tihs):转成jquery对象
		//clone(true):克隆出来的对象拥有被克隆对象的事件
		$(this).clone(true).appendTo("ul");
	});
 });
</script>
 </head>
 <body>
  <p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">

$(function()
{
	//将整个的p元素替换掉. 两种方法等效
	//$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");

	$("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");
});

</script>
 </head>
 <body>
<p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
$(function()
{
	//包在所有元素外面
	//$("p").wrap("<a href='http://www.google.com'><b></b></a>");

	//包在最内层文本外面
	$("p").wrapInner("<a href='http://www.google.com'><b></b></a>");
});
</script>
 </head>
 <body>
<p title="hello world">您认为圣思园培训好不好呢？</p><br>
<p title="hello world">您认为圣思园培训好不好呢？</p><br>
<p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
$(function()
{
	$("input:eq(0)").click(function()
	{
		//给多个属性赋值
		$("p").attr({"title":"welcome", "hello": "world"});
	});

	$("input:eq(1)").click(function()
	{
		//1个参数表示读取
		alert($('p').attr("hello"));
	});

	$("input:eq(2)").click(function()
	{
		//删除属性
		$('p').removeAttr("title");
	});
});
</script>
 </head>
 <body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3"><br>
<p title="hello world">您认为圣思园培训好不好呢？</p>
   <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<html>
 <head>
<style type="text/css">
.high{
font-weight: bold;
color:red
}

.another{
font-style:italic;
color:green
}
</style>

 <script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">

 $(function()
 {
	 //索引位置为0的inut
	$("input:eq(0)").click(function()
	{
		alert($('p').attr("class"));
	});

    $("input:eq(1)").click(function()
	{
    	//新加一个class. 如果原来就存在则替换掉原来的.
		$("p").attr("class", "high");
	});

	$("input:eq(2)").click(function()
	{  
		//对p元素附加一个css.原来就有的话 追加 
		$("p").addClass("high");
	});

	$("input:eq(3)").click(function()
	{
		//移除class中某个属性
		$("p").removeClass("high");
	});

	$("input:eq(4)").click(function()
	{
		//移除class
		$("p").removeClass();
	});

	$("input:eq(5)").click(function()
	{
		//如果有class为annother的. 则移除,如果没有则增加annother这个class
		$("p").toggleClass("another");
	});

	$("input:eq(6)").click(function()
	{
		//alert($('p').hasClass('another'));
		alert($('p').is('.another'));
	});
 });
</script>
 </head>
 <body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<input type="button" value="button6">
<input type="button" value="button7">
<p title="hello world" class="hello">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>
</html>

<script type="text/javascript">

 $(function()
 {
	$("input:eq(0)").click(function()
	{
		//<b>您认为圣思园培训好不好呢？</b>
		console.info($("p").html());
	});

	$("input:eq(1)").click(function()
	{
		//您认为圣思园培训好不好呢？
		console.info($("p").text());
	});

	$("input:eq(2)").click(function()
	{
		//给p标签附上HTML代码
		$("p").html('<a href="http://www.google.com">hello world</a>');
	});

	$("input:eq(3)").click(function()
	{
		//给p标签附上文本
		$("p").text('<a href="http://www.google.com">hello world</a>');
	});

	$("input:eq(4)").click(function()
	{
		//button5
		console.info($(this).val());
	});

	$("input:eq(5)").click(function()
	{
		//相当于标签里的value=""
		$(this).val('hello world');
	});
 });


</script>
 </head>
 <body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<input type="button" value="button6"><br>
 <p title="hello world"><B>您认为圣思园培训好不好呢？</B></p>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
 </body>

<script type="text/javascript">

$(function()
{
	//输入框获得焦点后触发   jquery中没有on前缀了.  js中是onfocus
	$("#username").focus(function()
	{
		var value = $(this).val();
		
		//  this.defaultValue 此时this是dom的this. 表示页面加载完的值
		if(value == this.defaultValue)
		{
			$(this).val('');
		}
	});

	//blur  焦点离开
	$('#username').blur(function()
	{
		var value = $(this).val();

		if(value == '')
		{
			$(this).val(this.defaultValue);
		}
	});
	
	
	//输入框获得焦点后触发   jquery中没有on前缀了.  js中是onfocus
	$("#password").focus(function()
	{
		var value = $(this).val();
		
		if(value == this.defaultValue)
		{
			$(this).val('');
		}
	});

	//blur  焦点离开
	$('#password').blur(function()
	{
		var value = $(this).val();

		if(value == '')
		{
			$(this).val(this.defaultValue);
		}
	});
}

);
 </script>
 </head>
 <body>
<input type="text" id="username" value="用户名"><br>
<input type="password" id="password" value="aaaaaa"><br>
<input type="button" value="我是一个按钮">
 </body>

$(function()
{
	//获得body下面的所有孩子. 不包括孙子
	var v1 = $("body").children();
	//p的孩子
	var v2 = $("p").children();
	//ul的孩子
	var v3 = $("ul").children();
	
	console.info(v1.length);//2
	console.info(v2.length);//0
	console.info(v3.length);//6

	for(var i = 0; i < v3.length; i++)
	{
		//jquery对象转成了dom对象
		console.info(v3[i].innerHTML);
	}
})

</script>

 </head>

 <body>
  
 <p title="hello world">您认为圣思园培训好不好呢？</p>

 <ul>

 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
$(function()
{
	//同辈的下一个元素
	var v1 = $("p").next();
	console.info(v1.html());

	//上一个同辈元素
	var v2 = $('p').prev();
	console.info(v2.html());

	//上下所有的同辈元素
	var v3 = $('p').siblings();
	console.info(v3.length);
});
</script>
 </head>
 <body>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 <ul>
 <li title="1">bb</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 <p title="hello world">您认为圣思园培训好不好呢？</p>
 <ul>
 <li title="1">aa</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 <ul>
 <li title="1">好</li>
 <li title="2">很好</li>
 <li title="3">非常好</li>
 <li title="4">特别好</li>
 <li title="5">太好了</li>
 <li title="6">好的无法描述了</li>
</ul>
 </body>

<script type="text/javascript">
//js中默认的事件处理:冒泡.  单击里面的元素,外层也会处理. 向外寻找
var method1 = function()
{
	console.info("div clicked");
}

var method2 = function(event)
{
	console.info(event);
	console.info("span clicked");
}

var method3 = function()
{
	console.info("body clicked");
	
}
</script>
</head>
<body onclick="method3();">
<div id="content" onclick="method1();">
	外层div元素
	<span onclick="method2(event);">内层span元素</span>
	外层div元素
</div>
<div id="msg"></div>
</body>

<script type="text/javascript">

   var startTime = new Date().getTime();

   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("#div1");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("#div1");
  }
</script>
</head>

<!-- 
//onload:页面全部加载完毕,外部文件(图片,css,js)也要全部加载完.才执行dom的onload
//jquery的ready:执行时机比dom的onload早很多,dom已准备好就执行. 图片未加载前执行
-->
<body  onload="test2();">
	<img src="http://www.shengsiyuan.com/Images/Ad/N.jpg" style="width:200px;height:200px;"/>

	<img src="http://www.infoq.com/resource/skyscraper/250/InfoQ%20Banner%20-%20ME4S.gif" style="width:200px;height:200px;"/>

<div id="div1"></div>
</body>