jQuery操作DOM节点

|-----html();  text(); val();

获取值  html():文本和标签都可以解析出来  text():只能获取文本   val():获取input:text中的值！

|----- html(content);  text(content);  val(content);

设置  html：设置节点  text：只能设置文本  val:纯value值

|-----创建节点：用工厂函数 $("节点")

|-----append(); appendTo();

|-----prepend();prependTo();

|------before();  after();

|------素材

<div class="contain">                    <h2>祝福冬奥</h2>                    <ul class="gameList">                             <li> 贝克汉姆：衷心希望北京能够申办成功！</li>                             <li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>                             <li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>                             <li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>                    </ul>          </div>

css

*{padding:0;margin:0;} html,body{font-family:"微软雅黑";} .contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;} .gameList{list-style:none;} .gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;} h2{font-size:16px;padding-left:20px;line-height:40px;}

|----remove();  detach();区别?

都可以删除整个节点，但是detach();会保留绑定的事件，其它的数据！

|------replacewith(); 和 replaceall();

replaceAll是replaceWith的另外一种写法 类似于append和appendTo

|----clone(true)和clone(false)区别！

|-----设置属性 attr();

$(function(){                 $("#btn").click(function(){                     $("#gg").attr("src","img/e.jpg");                     $("#gg").attr("width","150px");                     $("#gg").attr("height","150px");                 });             });

可以写为一行；

$("#gg").attr({"src":"img/e.jpg","width":"150px","height":"150px"});

|------获取attr();

var $sgg=$("#gg").attr("width");

                    alert($sgg);

|----移除属性

$("#gg").removeAttr("src");

|------jQuery操作dom

|-----1:dom核心   2：css dom  3:html dom

|------children();

|-----children(参数：选择器);

|-----parent(s);

|----find();

n  end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$("li:first").css("background-color","red").next().css("background-color","greenyellow").end().css("background-color","#FFFF00");

|-----小结：end()  结束了next(),并还原原始的状态（first）变成end()后面指定的颜色！

------ offset：偏移量top  left

$(document).ready(function(){
	var adverTop=parseInt($("#adver").css("top"));
	var adverLeft=parseInt($("#adver").css("left"));
	$(window).scroll(function(){
	var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
	var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离
	$("#adver").offset({top:scrollTop+adverTop});
	$("#adver").offset({left:scrollLeft+adverLeft});
	});
	})

|-----用jQuery或js的方式验证

<script>

                 $(function(){

                      $("input[id='reg_btn']").click(function(){

                            //非空验证

                            var email=$("#email").val();

                            //null:空对象

                            if(email.length==0){

                                  $("#sp1").html("您的邮箱不能为空！");

                                  return false;

                            }

                            $("#sp1").html("");

                            //alert("正常！");

                      });

                 });

           </script>

|-----js中的checked

$("#btn").click(function(){

                            //直接写js的

                            var aihao=document.getElementsByName("aihao");

                            //var ac=aihao.checked;

                            //alert(ac);

                            var str="";

                            for(var i=0;i<aihao.length;i++){

                                  if(aihao[i].checked){

                                       str+=aihao[i].value;

                                  }

                            }

                            $("#mydiv").html(str);

                      });

|----js或jQuery中正则表达式的运用！

|------test() : 判断  检测 是否包含？

正则:具体建议网上查

-----获得焦点  focus

$("#txt1").focus(function(){

                            $(this).css("background-color","blanchedalmond");

                      });

|------失去焦点 blur