jQuery学习笔记之二

最新推荐文章于 2024-04-13 00:48:08 发布

神奇的海螺先生

最新推荐文章于 2024-04-13 00:48:08 发布

阅读量185

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38087648/article/details/78414301

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>