jq 第四天 回顾 html()/text()/val() css() hasClass() attr()/prop() 事件绑定 添加元素

jq 第四天

回顾

dom操作三步骤
1.分析骨架
2.样式布局
3.功能实现
	3.1 事件和影响元素的对应关系
		1-1
		1-多
		多-1：封装函数--典型代表：计算总计
		多-多：==》 多-1（下标） 典型代表：轮播图
	3.2影响元素的哪些方面？
		内容：
			js:innerHTML/innerText/value
			 jq:html()/text()/val()
		样式：
			 js:js对象.style.样式名
			 jq:css()/addClass()/removeClass()/hasClass()
		属性：
			js:js对象.属性名
			jQ:attr()/prop()

html()/text()/val()

不传参：获取标签内容
		$("div").html()
传参：设置标签内容
		$("div").html("hahah")
		
	两者区别：
		html():识别标签
		text():不识别标签
	val():主要操作表单控件

css()

设置 
	 $("div").css({width:"100px",height:"100px",background:"red"});
     $("div").css("fontSize","30px");
 获取
  $("div").css("width");//返回值是字符串
  $("div").width();//获取元素宽度， 返回值是数值

hasClass()

$("div").hasClass("box");//
	作用：判断元素是否具有类名，
	返回值：boolean
	参数：需要判断的类名字符串

attr()/prop()

属性：固有属性：
            私有属性：href/target
             公共属性: title/id/class/style

   自定义属性：data/index
   
   一般情况：attr()用于操作自定义属性（除checked/selected/disabled属性名和属性值相同的）
            prop()用于操作固有属性(除了href/src等路径属性)
            操作同一个属性只能使用一个方法，不能交叉使用

事件绑定

js:
	js对象.onclick = function(){}		
	js对象.addEventListener("click",function(){},fasle)
	
	解绑：js对象.onclick = null;
jq:
	1.事件名(回调函数)
	 	$("div").click(function(){
                console.log($(this).width());
      	})
     2.on(事件名，回调函数)
            $("div").on("mouseout",function(){
                alert(2);
            })  
      3.bind(事件名，回调函数)
      	    $("div").bind("mouseover",function(){
                alert(1);
            })
         
    解绑：
    	1.unbind():不传参：默认解绑所有事件
    				传参：解绑指定事件
    	2.off()：不传参
    			 传参
    			 

添加元素

内部后插
   append() 内部后插
	  eg:$("ul").append(aLi);
   appendTo() 内部后插
	  eg:$("ul>li").appendTo("ul");

内部前插
	prepend()
		eg:$("#banner>ul").prepend("<li>内部</li>")
	prependTo()
		eg:$('<li>内部</li>').prependTo("ul");