前言

        第二天的内容基本是和属性有关.在jquery中操作属性基本是为了让自己的页面看起来比较让人感觉赏心悦目,但是一个静态页面有多大作用呢?要把他们的值写活,这个页面才有灵魂,不多说,

---

开搞

1.JQ的特殊属性操作

//1.val方法
$("#btn").val("哈哈哈哈");

//2.html和text方法
/*区别:
    获取时:
        html()获取标签和内容
        text()只获取内容*/
        $("div").html();
        $("div").text();
   /* 设置时:
        html会识别标签
       text会对标签进行转义       */  
       $("div").html("<p>我的是文本</p>");
       $("div").text("<p>我的是文本</p>");  

//3.width方法和height方法
//获取
$("div").width();//直接获取数字
$("div").innerwidth();//padding+width
$("div").outerwidth();//padding+width+border
$("div").outerwidth(true);//padding+magin+width+border
$("div").height();

//设置
$("div").width(100);
$("div").height(100);

//4.scrollTop和scrollLeft
//设置或获取垂直滚动条的位置
$(window).scroll(function(){
    $(window),scrollTop();
    $(window),scrollLeft();
});

//5.offset和position
//都是用来获取元素的位置
$("div").offset();//默认返回这个盒子的top值和left值,相对于页面
$("div").position();//获取元素相对于有定位的父元素的位置

2.jq事件机制

jq的事件发展历程
简单的事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定
简单的事件注册
click 点击事件
mouseenter 鼠标进入事件
mouseleave 鼠标离开事件
缺点:不能同时注册多个事件

//on注册事件的两种方式
//1.这是给已有的p自己注册的事件
$("p").on("click",ducotion(){
      alert("呵呵呵呵呵");  
});
$("btn").on("click",function(){
    $("<p>新建的p元素</p>").appendTo("div");
});
//2.注册一个委托事件是给父级注册的,但执行的是子
$("div").on("click","p",function(){
    alert("呵呵呵呵呵");
});
$("btn").on("click",function(){
    $("<p>新建的p元素</p>").appendTo("div");
});

3.事件的执行顺序

最里面的->委托事件->最外面的

4.事件解绑与事件触发

//移除事件用off
$("p").off("mouseter");
//触发事件
$("btn").on("click",function(){
    //$("p").click();
    $("p").trigger("click");
});

5.jq的事件对象

e.preventDefault()//阻止浏览器的默认行为用
e.stopPropagation()//阻止事件冒泡
return false;//既能阻止事件冒泡又能阻止浏览器的默认行为

6.停一下

delay(1000);//停1秒

7.each方法

$("li").each(function(index,element){
    $(element).css("opacity",(index+1)/10);
});

8.$冲突问题解决方案

<script src="itcast.js"></script>
<script src="jquery-1-12.4.js"></script>
//出现这种情况时,下面的会把上面的遮盖
//jq释放$的控制权
var  o = $.noConflct(); //o为$的替代品,jq把$的控制权给了o
o(function(){

});