jQuery学习笔记之二

来源：互联网发布：focusky mac版本编辑：程序博客网时间：2024/04/28 09:28

dom操作

查询 dom

利用选择器找到要操作的节点之后，获得节点的值、属性值、文本以及html内容
- a html():html内容
- b text() :文本
- c val()：节点的值
- d attr():属性值
此外这几个方法也可以用来修改节点的内容，值，文本内容和属性值

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript">    function f1(){        //innerHTML        //alert($('#d1').html());        //文本输出 innerText        //alert($('#d1').text());        //alert($('#username:eq(0)').val());        alert($('#d1').attr('id'));    }    function f2(){        //$('#d1').html('hello java');        //$('#username').val('jetty');        $('#d1').attr('style','color:red;font-size:60px;');    }</script></head><body style = "font-size:30px;">    <div id ="d1"><span>hello jquery</span></div>    username:<input name = "username" id = "username"/><br/>    <input type = "button" value = "点击" onclick = "f2();"/></body></html>

创建 d2.html

插入节点 d2.html

append():最后一个孩子追加
prepend();第一个孩纸追加
after();下一个兄弟 ul下
before();前一个兄弟

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript">    function f1(){        var $obj = $('<div>岳飞是一个民族英雄</div>');        //$('body').append($obj);        //$('body').prepend($obj);        //也可以简化        $('body').append('<div>岳飞是一个民族英雄</div>');    }    function f2(){        //$('ul').after('<div>hello</div>');        $('ul').before('<div>hello</div>');    }</script></head><body style = "font-size:30px;">    <a href = "javascript:;" onclick = "f2();">岳飞是谁？</a>    <br/>    <ul>        <li>item1</li>        <li>item2</li>        <li>item3</li>    </ul></body></html>

删除节点 d3.html

remove()
remove(selector)
empty():清空节点 innerHTML = ”“

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript">    function f1(){        //$('ul li:eq(1)').remove();        //$('ul li:eq(1)').empty();        $('ul li').remove('#l2');    }</script></head><body style = "font-size:30px;">    <ul>        <li>item1</li>        <li id = 'l2'>item2</li>        <li>item3</li>    </ul>    <input type = "button" value = "点击" onclick = "f1();"/></body></html>

如何将js代码与html分开 d4.html

使用如下的结构：

$(function(){        //这里的js代码会在加载完成之后执行。    });

数据与样式分离
数据与形式分离

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript" src = "../js/d4.js"></script></head><body style = "font-size:30px;">    <div id = "d1">hello jquery</div></body></html>

js代码：

window.onload = function(){        var obj = document.getElementById('d1');        obj.onclick = function(){            this.innerHTML = 'hello java';        };    };

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript" src = "../js/d6.js"></script></head><body style = "font-size:30px;">    <ul>        <li>item1</li>        <li>item2</li>        <li>item3</li>    </ul>    <input type="button" value = "点击" id ="b1" /></body></html>

js代码：

//相当于window.onload = function(){};    $(function(){        //页面加载完毕会执行这的代码        $('#d1').click(function(){            //相当于            //var obj = document.getElementById('d1');            //obj.onclick = function(){            //this.innerHTML = 'hello java';            //};            //this代表绑定了该事件的dom对象            //this.innerHTML = 'hello java';            $(this).html('hello java');        });    });

复制节点 d6.html

clone()
clone(true):使复制的节点也具有行为(将事件处理代码一块复制)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript" src = "../js/d6.js"></script></head><body style = "font-size:30px;">    <ul>        <li>item1</li>        <li>item2</li>        <li>item3</li>    </ul>    <input type="button" value = "点击" id ="b1" /></body></html>

js代码：

$(function(){        $('ul li:eq(2)').click(function(){            $(this).css('font-size','60px');        });        $('#b1').click(function(){            var $obj = $('ul li:eq(2)').clone(true);            $('ul').append($obj);        });    });

属性操作

-读取：attr(”);
-设置：attr(”,”);
-设置多个：attr(”,”,”);
-删除：removeAttr(”);
-样式操作：d7.html
-获取和设置：attr(“class”,”“) attr(“style”,”“)
-追加：addClass(”)
-移除：removeClass(”)或者removeClass(‘s1 s2’)或者removeClass()//删除所有样式
-切换样式：toggleClass,有该样式，就删除，没有，就添加
-是否有某个样式hasClass(”)
-读取css(”)
-css({”:”,”:”})设置多个格式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type = "text/javascript" src = "../js/d7.js"></script><style>    .s1{    font-size:60px;    }    .s2{    color:red;    }    .s3{    font-style: italic;    }</style></head><body style = "font-size:30px;">    <div id = "d1" class = "s3">hello jquery</div>    <input type="button" value = "点击" id ="b1"/></body></html>

js代码：

$(function(){        $('#b1').click(function(){            //$('#d1').attr('class','s1');            //$('#d1').attr('style','color:red;');            //$('#d1').removeClass('s1');            //$('#d1').removeClass();            //有就删除，没有添加            //$('#d1').toggleClass('s3');            alert($('#d1').hasClass('s2'));        });    });

遍历节点 d8.html

children()/children(selector);只考虑子元素，不考虑其他后代元素
next()/next(selector):下一个兄弟
prev()/prev(selector):上一个兄弟
siblings()/siblings(selector);其他兄弟
find(selector);从某一个节点开始查找所有满足选择条件的后代
parent();父节点

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script>    $(function(){        $('#b1').click(function(){            //length属性，获得jquery对象包含的dom对象个数            //var $obj = $('#d1').children('div');//子元素满足选择器要求 p不满足            //alert($obj.length);            //$('#d3').next('div').css('font-size','60px');            //$('#d3').siblings('p').css('font-size','60px');            //$('#d1').find('div').css('font-size','60px');            alert($('#d2').parent().attr('id'));        });    });</script></head><body style = "font-size:30px;">    <div id ="d1">        <div id = "d2">hello 1</div>        <div id = "d3">hello 2</div>        <div id = "d4">hello 3</div>        <p>hello 4</p>    </div>    <input type="button" value = "点击" id ="b1"/></body></html>

测试

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type = "text/javascript" src = "../js/jquery-1.7.min.js"></script><script type="text/javascript">    $(function(){        $('tbody tr:even:not(#b0)').attr('class','s2');        $('tbody tr:odd').attr('class','s3');        $('tbody tr:not(#b0)').click(function(){            $(this).toggleClass('s4');        });    });</script><style>    .s1{        background-color: gray;    }    .s2{        background-color: purple;    }    .s3{        background-color: orange;    }    .s4{        background-color: white;    }</style></head><body style = "font-size: 30px;">    <table id = "t1" border ="1" width = "60%" cellpadding ="0" cellspacing="0">        <thread>            <tr id = "b0" class = "s1"><td></td><td>姓名</td><td>薪水</td><td>年龄</td></tr>        </thread>        <tbody>            <tr><td id ="b1"><input type = "checkbox" checked = "checked"></td><td>张三</td><td>20000</td><td>23</td></tr>            <tr><td id ="b2"><input type = "checkbox"></td><td>李四</td><td>22000</td><td>22</td></tr>            <tr><td id ="b3"><input type = "checkbox" checked = "checked"></td><td>王五</td><td>14000</td><td>26</td></tr>            <tr><td id ="b4"><input type = "checkbox"></td><td>马六</td><td>15000</td><td>21</td></tr>        </tbody>        </table></body></html>

阅读全文

0 0