jquery set text click event append element delete element

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入jq框架-->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		
		<input type="text" value="5">
		<input type="button" value="按钮1">
		<input type="button" value="按钮2">
		<input type="button" value="按钮3">
		<input type="button" value="按钮4">
		<div>我是div</div>
	
		<script type="text/javascript">
				let h=$("<h1>我是一级标题</h1>");
				$("body").append(h);
				
				$("input:eq(1)").click(function(){
					$("div").text($("input:first").val());
					
					//删除h1
					//$("h1").remove();	
															
				});
				
				$("input:eq(2)").click(function(){
					$("h1").hide();
				});
				
				$("input:eq(3)").click(function(){
					$("h1").show();
				});
				
				$("input:eq(4)").click(function(){
					$("h1").toggle();//隐藏和现实切换执行
				});
		</script>
	</body>
</html>
<!-- jQuery给元素设置文本
	点击事件
	追加元素
	删除元素
	-->

toggle() definition and usage

The toggle() method toggles between hide() and show() on the selected element.

This method checks the visible state of the selected element. If an element is hidden, run show(), if an element is visible, run hide() - this creates a toggle effect.

Note: Hidden elements are not fully displayed (no longer affect the layout of the page).

Tip: This method can be used to switch between custom functions.
Syntax
$(selector).toggle(speed,easing,callback)

Parameter Description
speed Optional. Specifies the speed of hiding/showing the effect.

Possible values:

milliseconds
"slow"
"fast"

easing is optional. Specifies the speed of the element at different points in the animation. The default value is "swing".

Possible values:

"swing" - move slowly at the beginning/end, fast in the middle
"linear" - move at a constant speed

Tip: There are more easing functions available in the extension.
callback is optional. The function to be executed after the toggle() method is executed.

To learn more about callbacks, visit our jQuery Callback chapter.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: bisque;

        }
    </style>
    <!--引入jQuery框架文件-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>


<ul>
    <li>
        亲戚
        <ul>
            <li>习xx</li>
            <li>马大姐</li>
            <li>老干妈</li>
        </ul>
    </li>
    <li>
        朋友
        <ul>
            <li>气球哥</li>
            <li>隆冬强</li>
            <li>高富帅</li>
        </ul>
    </li>
    <li>
        同事
        <ul>
            <li>罗三炮</li>
            <li>唐三姐</li>
            <li>萧炎炎</li>
        </ul>
    </li>
</ul>



<h1>66</h1>
<script>
    //把所有第二层ul隐藏
    $("li>ul").hide();

    //给第一层的li添加点击事件
    $("body>ul>li").click(function (){
        //this代表触发事件的元素对象 this是js对象(this-触发事件的元素)
        //得到点击li里面的子元素li子元素
        $(this).children().toggle();
    });
</script>
</body>
</html>

jquery set text click event append element delete element

Guess you like