JQuery学习笔记(2)
1.JQuery常用方法1.1内部插入
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<scripttype="text/javascript">
//DIV标签插入到UL标签之前(父子关系)
$("ul").append($("div")); //格式：父.append(子) 两个元素是父子关系，子在父的后面
//DIV标签插入到UL标签之后(父子关系)
$("ul").prepend($("div"));//格式：父.prepend(子) 两个元素是父子关系，子在父的前面
</script>
</body>
1.2外部插入<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素外</div>
<scripttype="text/javascript">
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").after($("div"));//格式： 父.after(子) 子在父后面，两个元素是兄弟关系
//DIV标签插入到UL标签之后(兄弟关系)
$("ul").before($("div"));//格式： 父.before(子) 子在父前面，两个元素是兄弟关系
</script>
</body>
1.3获取、设置元素属性值和删除元素属性<body>
<form>
<table>
<tr>
<td>
<inputtype="text"name="username"value="张三"/>
</td>
<td>
<inputtype="password"name="password"value="123456"/>
</td>
</tr>
</table>
</form>
<scripttype="text/javascript">
//取得form下第一个input元素的type属性
// alert($("forminput:first").attr("type"));
//设置form下最后个input元素的为只读文本框
$("forminput:last").attr("readonly","readonly");
</script>
</body>
小结：在JQuery中，对象调用方法时只有一个参数时，一般是获取其对应属性的值，有两个参数时是给指定的属性设置值。
--------------------------------------------
<body>
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<scripttype="text/javascript">
//为<table>元素添加属性border/align/width
$("table").attr("border","2").attr("align","center").attr("width","60%");
//将<table>元素的align属性删除
$("table").removeAttr("align");
</script>
</body>
1.4JQuery中创HTML元素l 创建节点: 使用 jQuery 的函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个jQuery对象返回.
l 注意:
? 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
? 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”)或 $(“</P>”)
l 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建。
<body>
<hr/>
<scripttype="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
var $div = $("<div>哈哈</div>").attr("id","divID"); //创建元素只要将元素放到$()中就可以了
$(document.body).append($div);
</script>
</body>
1.5替换<body>
<tableborder="1"align="center">
<tr>
<td>
<divstyle="width:165px;height:23px">
双击会被替换成文本框
</div>
</td>
<td>
不会变
</td>
</tr>
</table>
<scripttype="text/javascript">
//双击<div>中的文本，用文本框替换文本
$("div").dblclick(function() {
var $input = $("<inputtype='text' value='哈哈'/>");
$(this).replaceWith($input); //格式：旧元素.replaceWith(新元素)
});
</script>
</body>
1.6添加、删除、切换样式<body>
<div>无样式</div>
<divclass="myClass">有样式</div>
<scripttype="text/javascript">
//为无样式的DIV添加样式
// $("div:first").addClass("myClass"); //格式:对象.addClass(“样式名”)
//为有样式的DIV删除样式
// $(".myClass").removeClass("myClass"); //格式:对象.removeClass(“样式名”)
//切换样式，即有样式的变成无样式，无样式的变成有样式
// $("div").toggleClass("myClass");//格式:对象.toggleClass(“样式名”)
//最后一个DIV是否有样式
var flag = $(".myClass").hasClass("myClass");
alert(flag);
</script>
</body>
1.7查找<body>
<p>Hello</p>
<div>
<span>
HelloAgain
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<hr/>
<hr/>
<scripttype="text/javascript">
//取得div元素的直接子元素内容，不含后代元素(即span元素的内容Hello Again<b>Bold</b>)
// alert($("div").children().html());
//取得div元素的下一个同级的兄弟元素内容
// alert($("div").next().html());//And Again
//取得div元素的上一个同级的兄弟元素内容
// alert($("div").prev().html());//Hello
//依次取得div元素的上下一个同级的所有兄弟元素的个数
alert($("div").siblings().size());//5个
</script>
</body>
1.8动画显示隐藏：show hide
淡入淡出：fadeIn fadeOut
上滑下滑：slideUp slideDown
<body>
<p>
<!-- <imgsrc="../images/zgl.jpg" style="display: none;"/> -->
<imgsrc="../images/zgl.jpg"/>
</p>
<div>
<!--加载完毕 -->
</div>
<scripttype="text/javascript">
//图片显示
// $("img").show(5000);//show方法的参数有("slow", "normal", or"fast")或表示动画时长的毫秒数值。
//图片隐蔽
$("img").hide(5000); //参数同show，show 和hide方法都可以传一个回调函数，在动画执行完毕的时候处理相应的的事情。
</script>
</body>
1.9复制clone() 不复制被复制元素的行为。
clone(true)有参数的时候会将被复制的元素的行为(如果单击事件)也一起复制过来。
2.事件2.1单击事件click()2.2双击事件dblclick()2.3失去焦点 blur()2.4获取焦点focus()2.5页面加载事件dom--onload:
1)window.onload=function(){}页面加载时执行，后者会覆盖前者
2)只有当页面全部加载完成后，onload才能够执行
3)window.onload无简写形式
jquery--ready():
1)$(document).ready(函数)页面加载时执行，每个方法都会执行，不会覆盖
2)只要当页面的轮廓加载完毕，就可以执行ready()事件，不必等行所有img都显示完成，相对onload执行速度较快
3)ready()可以有简写形式，叫$(函数);
2.6内容改变change()2.7选中文字select()2.8提交表单submit()2.9页面卸载 unload()页面卸载是指刷新页面或关闭浏览器的时候。有些浏览器关闭时不会执行upload事件，不建议使用upload事件处理问题。
3.JQuery中使用AJAX3.1 load()方法的使用1、load方法使用jquery对象调用的，谁调用了load方法，该方法的返回值就会设置到该对象的value属性上。
2、load方式的请求方式
如果有无参数则是GET方式，如果有参数则是POST方式。（默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式）
3、load有三个参数load(url[必选，请求的地址], sendData[可选，发送的参数]，fn[可选，回调用函数])，发送的参数必须符合json格式，即{key:value, key:value}这样的格式。
回调函数中也有三个参数fn(backData[返回的数据],textStatus[文本状态, 如success，error ],xhr[XMLHttpRequest对象] )
3.2 $.get()方法的使用3.3 $.post()方法的使用无论使用get或是post，都无需程序员编码和设置post请求头，都由jquery框架全权负责。