JQuery HTML

1.JQuery捕获

1.三个简单的适用于DOM操作的方法

text（）：设置或者返回所选元素的文本内容

html（）：设置或者返回所选元素的文本内容（包含html标记）

val（）：设置或者返回表单的值

2.text（）实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".bth1").click(function(){
            alert($("p").text());
        });
        $(".bth2").click(function(){
            alert($("p").html());
        });
    });

    </script>


</head>
<body>
<p>点击之后，返回<b>这段文</b>字的相<i>关内</i>容</p>
<button class="bth1">点击显示内容</button>
<button class="bth2">点击显示html</button>
</body>
</html>

2.val（）的实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".bth1").click(function(){
            alert("输入的值："+$("input").val());
        });
    });

    </script>


</head>
<body>
<input type="text" name="text1" class="input" value="" >
<button class="bth1">点击之后显示输入值</button>

</body>
</html>

3.attr()实例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".bth1").click(function(){
            alert($("a").attr("href"));
        });
        $(".bth2").click(function(){
            alert($("a").attr("shape"));
        });

    });

    </script>


</head>
<body>
<a href="www.baidu.com" shape="poly" >百度一下</a>
<button class="bth1">点击之后获取链接属性值</button>
<button class="bth2">点击之后获取形状属性值</button>


</body>
</html>

2.JQuery的设置

1.设置text（），val（）和html（）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".bth1").click(function(){
            $(".p1").text("图书馆人好少");
        });
        $(".bth2").click(function(){
            $(".p2").html("<b>对面坐了个美女</b>");
        });
        $(".bth3").click(function(){
            $("input").val("为什么还是没有女朋友");
        });

    });

    </script>


</head>
<body>
<p class="p1">设置文本</p>
<p class="p2">设置html</p>
<input type="text" name="text1" value="设置值">
<button class="bth1">点击之后设置文本属性值</button>
<button class="bth2">点击之后设置html属性值</button>
<button class="bth3">点击之后设置值属性值</button>


</body>
</html>

2.关于text（）和html（）的回调函数问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
var i=3;
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){                              //关于回调函数的参数i和origText没有懂是什么意思
      return " 新文本: Hello world! "; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return " 新 html: Hello <b>world!</b> "; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

3.使用attr（）改变值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>

$(document).ready(function(){
    $("button").click(function(){
        $("a").attr("href","https://www.jd.com/");
    });
  
});
</script>
</head>

<body>
<a href="http://www.baidu.com">点击连接</a>
<button id="btn1">点击之后链接变为京东</button>

</body>
</html>

4.attr（）的回调方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>

$(document).ready(function(){
    $("button").click(function(){
        $("a").attr("href",function(i,origValue){
            return origValue+"/tranlate";
        });
    });
  
});
</script>
</head>

<body>
<a href="http://www.baidu.com">点击连接</a>
<button id="btn1">点击之后链接百度翻译</button>   //链接的用户是我，所以失效，但是这个方式是正确的

</body>
</html>

3.添加元素

1.append（）在指定元素的内部结尾增加内容

prepend（）方法类似，只不过是添加在前方

而after（）和before的与上面的区别在与是在内部元素外添加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>

$(document).ready(function(){
    $("button").click(function(){
        $("p").append(",在你最美丽的时刻");
    });
  
});
</script>
</head>

<body>
<p>如何让我遇见你</p>
<button id="btn1">点击之后追加一句话</button>

</body>
</html>

2.追加多条内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function missyou()
{
    var txt1="<p>2017.4.17 19：10：59</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("2017.4.17 19：11：00");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="我想你，只在这一秒";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>三行情书：</p>
<button onclick="missyou()">情满天下</button>

</body>
</html>

4.删除元素

1.remove（）是删除父元素和子元素，就是所有内容,包括事件和数据

2.empty（）是删除子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $(".b1").click(function(){
        $(".div1").remove();
    });
    $(".b2").click(function(){
        $(".div2").empty();
    });
    
});
</script>
<style type="text/css">
    .div1,.div2{
        background-color: yellow;
        border: solid 1px red;
        margin: 10px;
    }
</style>
</head>
<body>
<div class="div1" >
    <p>一句话</p>
    <i>一句话</i>
    <b>一句话</b>
</div>

<div class="div2" >
    <p>一句话2</p>
    <i>一句话2</i>
    <b>一句话2</b>
</div>


<button class="b1" >remove()删除被选元素及子元素</button>
<button class="b2">empty()删除被选元素的子元素</button>

</body>
</html>

3.remove（）方法还允许一个参数（选择器：选择一类元素删除）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $(".b1").click(function(){
        $("div").remove(".div2");                          //选择div中class为“div2”的删除
    });

    
});
</script>
<style type="text/css">
    .div2{
        background-color: yellow;
        border: solid 1px red;
        margin: 10px;
    }
</style>
</head>
<body>
<div class="div">
    
</div>

<div class="div2" >
    <p>一句话2</p>
    <i>一句话2</i>
    <b>一句话2</b>
</div>


<button class="b1" >remove()删除被选元素及子元素</button>


</body>
</html>

5.JQuery的css类

1.addclass（）添加一个或者多个css类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $(".b1").click(function(){
        $("h1,p").addClass("size");                               //addClass的C要大写
        $("h2,p").addClass("color");
        $("h3,h4").addClass("size color");                        //添加多个
    });

    
});
</script>
<style type="text/css">
    .size{
        font-size: 20px;
    }
    .color{
        color: red;
    }
</style>
</head>
<body>

    <p>一句话</p>
    <h1>一句话</h1>
    <h2>一句话</h2>
    <h3>一句话</h3>
    <h4>一句话</h4>

<button class="b1" >点击添加类</button>


</body>
</html>

2.removeClass（）移除类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $(".b1").click(function(){
        $("h1,p").addClass("size");                               //addClass的C要大写
        $("h2,p").addClass("color");
        $("h3,h4").addClass("size color");                        //添加多个
    });
    $(".b2").click(function(){
        $("h1,h2,p,h3,h4").removeClass("size color");
    });

    
});
</script>
<style type="text/css">
    .size{
        font-size: 20px;
    }
    .color{
        color: red;
    }
</style>
</head>
<body>

    <p>一句话</p>
    <h1>一句话</h1>
    <h2>一句话</h2>
    <h3>一句话</h3>
    <h4>一句话</h4>

<button class="b1" >点击添加类</button>
<button class="b2">点击移除类</button>


</body>
</html>

3.toggleClass（）实现添加删除的转换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $(".b1").click(function(){
        $("h1,p,h2,h3,h4").toggleClass("size color");                               
        
    });


    
});
</script>
<style type="text/css">
    .size{
        font-size: 20px;
    }
    .color{
        color: red;
    }
</style>
</head>
<body>

    <p>一句话</p>
    <h1>一句话</h1>
    <h2>一句话</h2>
    <h3>一句话</h3>
    <h4>一句话</h4>

<button class="b1" >点击添加/删除类</button>


</body>
</html>

6.CSS方法

css返回属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $("button").click(function(){
        alert(
            $("p").css("background-color")
            );
});
});
</script>

</head>
<body>

    <p style="background-color: red">一句话</p>


<button class="b1" >点击返回css属性值</button>


</body>
</html>

css设置属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
    $(".b1").click(function(){
        alert(
            $("p").css("background-color")
            );
});
    $(".b2").click(function(){
        $("p").css("background-color","yellow");                    //设置属性
    });
});
</script>

</head>
<body>

    <p style="background-color: red">一句话</p>


<button class="b1" >点击返回css属性值</button>
<button class="b2" >点击设置css属性值</button>


</body>
</html>

css设置多个属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>

7.JQuery 尺寸

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>
本博客基于网络课程完成，旨在学习，有错误请指正！
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/comefuture/p/6725335.html