jquery全解（2）

来源：互联网发布：条形码进销存软件编辑：程序博客网时间：2024/06/06 09:32

本章内容：
1.jquery 添加和删除
2.jquery添加删除和切换类、操作类属性
3.jquery 尺寸获取 与遍历
4.jquery的index()的使用

1.jquery添加和删除

这里写图片描述
先解释下什么是内部结尾、内部开头、外部之后、外部之前，以一个div为例
如图：

<!DOCTYPE html><html lang="en"><head><style>    div{width: 200px;height: 100px;border: 1px solid black;background: red;}</style><script src="jquery.js"></script>    <meta charset="UTF-8">    <title>jquery添加删除</title></head><body>    <div><br>span<br></div>    <br>    <input class="remove" type="button" value="remove">    <input class="empty" type="button" value="empty">       <script>        $("div").append("内部结尾append")        $("div").prepend("内部开头prepend")        $("div").after("外部之后after")        $("div").before("外部之前before")        //点击删除容器及子集        $(".remove").click(            function(){                $("div").remove();            }            )        //点击清空子集，容器保留        $(".empty").click(            function(){                $("div").empty();            }            );    </script></body></html>

效果图：
这里写图片描述

2.jquery 添加删除和切换类、操作类属性

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <script src="jquery.js"></script>    <meta charset="UTF-8">    <title>Document</title>    <style>        div{width: 100px;height: 100px;background: red;}        .border_black{border: solid 5px black;}        .txt_color{color:blue;}    </style></head><body>    <div class="txt_color">哈哈</div>    <input class="addClass" type="button" value="添加类">    <input class="removeClass" type="button" value="删除类">    <input class="arclass" type="button" value="添加/删除"></body><script>    //添加类    $(".addClass").click(function(){        $("div").addClass("border_black")    })    //删除类    $(".removeClass").click(function(){        $("div").removeClass("txt_color")    })    //添加没有的，删除有的    $(".arclass").click(function(){        $("div").toggleClass("txt_color border_black")    })</script></html>

这里写图片描述

3.jquery 尺寸获取与遍历

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <script src="jquery.js"></script>    <meta charset="UTF-8">    <title>jquery遍历</title>    <style>        div{width: 500px;height: 500px;border: 5px solid red;}        ul{border: 5px solid pink}        li,h1{border: 5px blue solid;}    </style></head><body>    <div>        <ul>            <li><a href="">1</a></li>            <h1><span>2</span></h1>            <li>3</li>            <li>4</li>        </ul>    </div>    <script>    //li的直接父级ul边框变黑    $("li").parent().css("border-color","black")    //li的所有父级div和ul边框变黑    $("li").parents().css("border-color","black")    //ul的直接子级li,h1边框变黑    $("ul").children().css("border-color","black")    //div的跨子级li边框变红    $("div").find("li").css("border-color","red")    //div的所有子级ul，li，a，h1边框变红    $("div").find("*").css("border-color","red")    //li的下一个同胞级h1,li4边框变黑    $("li").next().css("border-color","black")    //li的上一个同胞级li3边框变黑    $("li").prev().css("border-color","black")    //除了h1其他同胞级边框变黄    $("h1").siblings().css("border-color","yellow")    </script></body></html>

<!DOCTYPE html><html lang="en"><head>    <script src="jquery.js"></script>    <meta charset="UTF-8">    <title>Document</title>    <style>        div{background: red;float: left;}        input{clear: both;float: left;}    </style></head><body>    <div>宽度</div>    <br>    <input class="button1" type="button" value="添加宽度">    <input class="button2" type="button" value="获得尺寸">    <script>    $(".button1").click(function(){        $("div").append("添加宽度");    })    $(".button2").click(function(){        document.title=$("div").width()    })    </script></body></html>

尺寸：
这里写图片描述
遍历：
略

4.jquery的index()的使用

这里写图片描述

<!DOCTYPE html><html lang="en"><head><style>    span{background:gray;}</style><script src="jquery.js"></script>    <meta charset="UTF-8">    <title>index()的使用</title></head><body>    <div>        <h1>标题</h1>        <p>段落</p>        <span>文本</span>        <a href="">链接</a>        <span>文本</span>        <span>文本</span>        <span>文本</span>    </div>    <script>        $("span").click(function(){            document.title=$("span").index(this)        })    </script></body></html>

这里写图片描述

阅读全文

0 0

jquery全解（2）

1.jquery添加和删除

2.jquery 添加 删除和切换类、操作类属性

3.jquery 尺寸获取 与遍历

4.jquery的index()的使用

2.jquery 添加删除和切换类、操作类属性

3.jquery 尺寸获取与遍历