jQuery基础知识笔记（五）

1.项目中常用增加删除列表数据，新增弹框

如图所示

添加数据

删除数据

（div）先建一个整体大框

<div class="wrap">
/*先写一个添加列表元素的按钮*/
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
/*再写列表*/
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>html</td>
            <td>软件学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>软件学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        </tbody>
    </table>
</div>

新增弹框出现后的背景色

<div id="j_mask" class="mask"></div>

新增按钮的弹框
value=""中写入值就可以设置input框中默认显示

<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>
        <div id="j_hideFormAdd">x</div>/*关闭按钮*/
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="软件学院">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>

（css）省略了一些字体样式

* {padding:0;margin:0;}
.wrap {width:410px;margin:100px auto 0;}
table {border-collapse:collapse;border-spacing:0;border:1px solid #c0c0c0;}
th,td {border:1px solid #d0d0d0;color:#404060;padding:10px;}
td a.get {text-decoration:none;}
a.del:hover {text-decoration:underline;}
tbody tr:hover {cursor:pointer;background-color:#fafafa;}
.form-item {height:100%;position:relative;padding-left:100px;padding-right:20px;margin-bottom:34px;line-height:36px;}
.form-item > .lb {position:absolute;left:0;top:0;display:block;width:100px;text-align:right;}
.form-item > .txt {width:300px;height:32px;}
.mask {position:absolute;top:0px;left:0px;width:100%;height:100%;background: #ff312e;opacity:0.15;display:none;}
.form-add {position:fixed;top:30%;left:50%;margin-left:-197px;padding-bottom:20px;background:#fff;display:none;}
.form-add-title {background-color:#f7f7f7;border-width:1px 1px 0 1px;border-bottom:0;margin-bottom:15px;position:relative;}
.form-add-title span {width:auto;height:18px;font-size:16px;font-family:微软雅黑;font-weight:bold;color:rgb(102,102,102);text-indent:12px;padding:8px 0px 10px;margin-right:10px;display:block;overflow:hidden;text-align:left;}
.form-add-title div {width:16px;height:20px;position:absolute;right:10px;top:6px;font-size:30px;line-height:16px;cursor:pointer;}
.form-submit input {width:170px;height:32px;}

（jq）大框$(function(){})省略
添加数据按钮点击后，显示遮罩层和弹框display：block

$("#j_btnAddData").click(function () {
     $("#j_mask").css("display","block");
     $("#j_formAdd").css("display","block");
});

点击关闭按钮，隐藏遮罩层和弹框display：none

$("#j_hideFormAdd").click(function () {
     $("#j_mask").css("display","none");
     $("#j_formAdd").css("display","none");
});

弹框中的确认添加按钮，获取.val()，置空.val("")

$("#j_btnAdd").click(function () {
                //获取课程  j_txtLesson
                var lesson=$("#j_txtLesson").val();
                //获取学院  j_txtBelSch
                var belSch=$("#j_txtBelSch").val();
                //创建行--拼接字符串,添加到tbody中
                $("<tr><td>"+lesson+"</td><td>"+belSch+"</td><td><a href='javascrip:;' class='get'>GET</a></td></tr>").appendTo($("#j_tb"));
                //隐藏遮挡层和对话框
                $("#j_mask").css("display","none");
                $("#j_formAdd").css("display","none");
                $("#j_txtLesson").val("");//情况课程的文本框(此处可能会有一个课程名称添加bug),val("")是清空
            });

点击GET删除表格中的信息

//如果元素是动态添加的,那么非常推荐用on的方式为动态添加的元素绑定事件
     $("#j_tb").on("click",".get",function () {
          $(this).parent().parent().remove();//删除tr，a的父元素的父元素。“.get”在a中其父元素是td,再父元素是tr,把tr移除
          //$(this).parent("td").parent("tr").remove();也对
     });

2.解绑事件

点绑定按钮，之后再点p标签中内容，有弹框“我被点了”，点击解绑后，点p标签，不再弹出

delegate->undelegate

      $(function () {
            //点击第一个按钮为div中p绑定点击事件
            $("#btn1").click(function () {
                $("#dv").delegate("p","click",function () {
                    alert("我被点了");
                });
            });
            //点击第二个按钮为div中p解除绑定事件
            $("#btn2").click(function () {
                $("#dv").undelegate("p","click");//解绑
            });
        });

bind->unbind注意解绑的时候，这里click是一个参数

$(function () {
           $("#btn1").bind("click",function () {
               alert("我又被点了");
           });
           $("#btn2").bind("click",function () {
               $("#btn1").unbind("click");//解绑事件的方法
           });
       });

on->off

       $(function () {
           $("#btn1").on("click",function () {
               alert("我被点了");
           });
           $("#btn2").on("click",function () {
               //off()参数:要解绑的事件的名字
               $("#btn1").off("click");//解绑事件,多个事件解绑加空格
           });
       });

• $("#dv").off(“click”,"**");把子级元素的点击事件解绑了,父级元素的点击事件还存在
• $("#dv").off();移除父级元素和子级元素的所有的事件
• 如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑。但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑

(div)

<input type="button" value="绑定事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
    <p>这是div中的一个p标签</p>
</div>

(jq）

$(function () {
            $("#dv").delegate("p","click",function () {
                alert("p被点了");
            });
            $("#dv").click(function () {
                alert("div被点了");
            });
            $("#btn2").click(function () {
               //$("#dv").off("click");
               $("#dv").off("click","**");
               // $("#dv").off();
            });
        });

3.事件触发

触发事件–3三种方式

• $("#btn1").click();
• trigget()方法中需要写上触发事件的名字 $("#btn1").trigger(“click”);
• $("#btn1").triggerHandler(“click”);
  案例1：点击第二个按钮调用第一个按钮的点击事件—触发第一个按钮的点击事件

(div）

<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="第二个按钮" id="btn2"/>

(jq)

$(function () {
            $("#btn1").click(function () {
                $(this).css("backgroundColor","red");
            });
            $("#btn2").click(function () {
                $("#btn1").triggerHandler("click");//触发事件
            });
        });

案例2： .click()和trigget触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁)，triggerHandler触发事件的方式不会触发浏览器的默认事件
focus获取焦点的事件

(div)

<input type="button" value="触发事件" id="btn"/>
<input type="text" value="" id="txt"/>
<span id="sp"></span>

（jq）

$(function () {
            $("#btn").click(function () {
                //触发文本框的获取焦点的事件
                $("#txt").focus();
                $("#sp").text("文本框获取到焦点了");
            });
        });

4.事件对象

为div中的按钮绑定事件,获取事件对象中内容

• event.delegateTarget----->div—>谁代替元素绑定的事件–div
• 
  event.currentTarget----->input—>真正是谁绑定的事件
  
  event.target---->input----触发的事件
  
  

（div）

<div id="dv">
    <input type="button" value="按钮" id="btn"/>
</div>

(jq)

$(function () {
            //
            $("#dv").on("click","input",function (event) {
                //获取函数在调用的时候,有几个参数
                //console.log(arguments[0]);查看内容
                console.log(event);
            });
        });

5.案例：点击abcde切换div颜色

当按钮被按下时，发生 keydown 事件。

$(function () {
            $(document).keydown(function (e) {
                var keyCode=e.keyCode;//键盘按下后的键对应的键值
                switch (keyCode){
                    case 65:$("#dv").css("backgroundColor","red");break;
                    case 66:$("#dv").css("backgroundColor","green");break;
                    case 67:$("#dv").css("backgroundColor","blue");break;
                    case 68:$("#dv").css("backgroundColor","yellow");break;
                    case 69:$("#dv").css("backgroundColor","black");break;
                }
            });
        });

非jq的键盘点击案例：在输入框中输入键盘上的字符获取按下字母的 Unicode 字符代码

<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
/* 在实例中，我们使用了支持多浏览器的方法，因为 keyCode 属性无法再 Firefox 浏览器中工作。但是 which 属性可以。
如果浏览器支持 event.which 则使用 event.which，否则使用 event.keyCode */
function myFunction(event) {
    var x = event.which || event.keyCode;
    document.getElementById("demo").innerHTML = " Unicode 值为: " + x;
}
</script>

6. 取消事件冒泡+取消默认事件

• 事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发

• 元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发

• 取消事件冒泡
  jQuery中 return false
  event.preventDefault也可以取消默认事件

（div）

<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>

(jq)

• 正常效果：
  点3，出现div3被点，因为3取消了事件冒泡
  点2，出现div2,1被点
  点1，出现div1被点
• 如果3不取消事件冒泡，2里也有背景变黑样式：
  点3,出现div3，2，1被点了，之后背景变黑
  点2，出现div2，1被点了，之后背景变黑
  点1，出现div1被点了

$(function () {
            $("#dv1").click(function () {
                alert("dv1被点了"+$(this).attr("id"));
            });
            $("#dv2").click(function () {
                alert("dv2被点了"+$(this).attr("id"));
                //$("body").css("backgroundColor","black");
            });
            $("#dv3").click(function () {
                alert("dv3被点了"+$(this).attr("id"));
                return false;
            });
        });

取消浏览器的默认事件（超链接跳转）
添加return false;后不跳转

<a href="http://www.baidu.com" id="ak">百度</a>

$(function () {
            $("#ak").click(function () {
                alert("超链接被点了");
                return false;
            });
        });

7.链式编程原理

内部返回了return this当前对象有些方法设置了值才能返回当前对象，如果没有设置值，是获取属性对应的值，而不是当前对象

 function Student(name) {
            this.name=name;
            this.sayHi=function () {
               console.log("我的名字叫"+this.name);
               return this;//把当前对象返回
            };
            this.eat=function () {
                console.log("吃点什么");
            };
        }
        var stu=new Student("小明");
       // stu.sayHi().eat();//sayHi()，如不用return this;把当前对象返回，会出现bug产生断链，不传值不能进行链式编程
        stu.sayHi().eat();

function Student(name) {
            this.name=name;//注意这个不能写在里面否则undefined
            this.sayHi=function (name) {//这里也有参数
                if(name){
                    return this;
                }else{
                    console.log("我的名字叫"+this.name);
                }
            };
        }
        var stu=new Student("小明");
        stu.sayHi()

function Student(name) {
            this.name=name;
            this.sayHi=function (name) {//这里没有name的话输出就是小明了
                if(name){
                    console.log("这是"+name);
                    return this;
                }else{
                    console.log("我的名字叫"+this.name);
                }
            };
            this.eat=function () {
                console.log("吃点什么");
            };
        }
        var stu=new Student("小明");
        stu.sayHi("小黑").eat();

8.each方法

jQuery中的隐式迭代，不需要我们再次进行遍历对某些元素进行操作但是，如果涉及到对不同的元素有不同的操作，那么需要进行each遍历

案例:

页面加载后,让每个li的透明度发生改变;不同的元素不同的设置方式–each方法

（css）

ul li{
            width: 100px;
            height: 100px;
            background-color: green;
            list-style-type: none;
            float: left;
            margin-left: 10px;
        }

（div）

<ul id="uu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
   ...
</ul>

(jq)

$(function () {
     $("#uu>li").each(function (index,element) {
        //第一个参数是索引,第二个参数是对象        
        //console.log(arguments[0]+"====="+arguments[1]);
         $(element).css("opacity",(index+1)/10);
           });
       });

9评价案例

)
（css）

* {padding: 0;margin: 0;}
.comment {font-size: 40px;color: yellow;}
.comment li {float: left;}
ul {list-style: none;}

(div)

<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>

(jq)

$(function () {
            $(".comment>li").mouseover(function () {
                $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
            }).mouseout(function () {
                $(".comment").find("li").text("☆");
                $(".comment>li[index=1]").text("★").prevAll("li").text("★")
                //找到鼠标在的哪个li上它是实心星（这个li的index=1），让它前面的也是实心（没有这一步不能实现点击确定实心星数）
            }).click(function () {
                $(this).attr("index","1").siblings("li").removeAttr("index");
                //点击为这个li添加一个自定义属性，作为一个标识，兄弟元素移除这个属性
            });
        });

10.多库共存

同一个页面不仅引入了jQuery的外部文件，也引入了其他的库文件。如果此时其他的库文件里也有$符号，那么就使用
$.noConflict()解决
其他语言中：这种方式叫做解决命名空间的冲突

		var xy=$.noConflict();
		var $=100;//$原本是对象--->变量
        jQuery(function () {
            jQuery("#btn").click(function () {
                alert("111111");
            });
        });

       // 让jquery对$对象进行释放控制权
       var xy=$.noConflict();
       //从此以后xy就是曾经的$---一毛一样的
       var $=100;//$原本是对象--->变量
       xy(function () {
           xy("#btn").click(function () {
               alert("11111111");
           });
       });