JQUERY总结（四）

对象拷贝：

在这里插入图片描述

 <script src="jQuery.min.js"></script>
<script>
    $(function(){
        // var targetObj={};
        // var obj={
        //     id:0,
        //     name:"xinyi",
        //     location:"henan"
        // };
        // //覆盖以前的相同key值对应的数据
        // $.extend(targetObj,obj);
        // console.log(targetObj);
 
        var targetObj={};
        var obj={
            id:0,
            name:"xinyi",
            location:"henan",
            msg:{
                age:18,
                
            }
        };
        //覆盖以前的相同key值对应的数据
        $.extend(targetObj,obj);
        console.log(targetObj);
    })
复制

在这里插入图片描述

绑定多个事件：

 <style>
    div{
        margin:200px auto;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .current{
        background-color: purple;
    }
</style>
<body>
    <div></div>
</body>
<script src="jQuery.min.js"></script>
<script>
// $('div').on({
//     mouseover: function(e) {
//         $(this).css('background',"skyblue");
//     },
//     click: function(e) {
//         $(this).css("background","purple");
//     },
//     mouseleave: function(e) {
//         $(this).css("background", "blue")
//     }
// })
$("div").on("mouseenter mouseleave",function(){
    $("div").toggleClass("current")
})
</script>复制

事件委托和动态绑定以及解除绑定

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    ul li {
      list-style: none;
      cursor: pointer;
    }
  </style>
  <script src="jQuery.min.js"></script>
  <body>
    <div></div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <ol></ol>
    <p>世界我来了</p>
  </body>
  <script>
    // 这样会造成全选
    // $("ul li").click(function() {
 
    // })
    //事件委托，每一个li都可以触发，给父元素绑定事件，点击子元素时触发
    $("ul").on("click", "li", function () {
      alert("11");
    });
    // 解除绑定：off
    // $("ul").off("click", "li")
    // 后来创建的元素也能继承之前的方法
    $("ol").on("click", "li", function () {
      alert("你好");
    });
    var li = $("<li>后来</li>");
    $("ol").append(li);
    $("ol").off("click", "li");
    // one：只触发一次
    $("p").one("click", function () {
      alert("22");
    });
  </script>
</html>
 复制

微博发布案例：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        display: flex;
    justify-content: center;
    align-items:center ;
    }
    .box{
        margin-top: 200px;
        border:1px solid black;
        width: 800px;
        height: 400px;
 
 
    }
    textarea{
        margin-top:50px;
        width: 600px;
        height: 200px;
    }
    span {
        font-weight: 700;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
    }
    button{
        font-weight: 700;
        font-size: 20px;
        font-family: Arial, Helvetica, sans-serif;
    }
    li{
        font-size: 20px;
       list-style: none;
    }
    a{
       
        font-size: 20px;
        text-decoration: none;
        color: black;
    }
    a:hover{
        color:red;
    }
</style>
<body>
    <div class="box" id="weibo">
        <span>微博</span>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
    <button class="btn">发布</button>
    <ul></ul>
    </div>
</body>
<script src="jQuery.min.js"></script>
<script>
    
    
$(".btn").on("click",function() {
    var li=$("<li></lil>");
        li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
       
       
        $("ul").prepend(li); 
        li.slideDown();
        // 发布后清空
        $(".txt").val("");
})
// 事件委托 on 动态创建的元素绑定事件
$("ul ").on("click", "a",function() {
$(this).parent().slideUp(function() {
    $(this).remove();
})
})
</script>
</html>复制

JQUERY总结（四）

对象拷贝：

绑定多个事件：

事件委托和动态绑定以及解除绑定

微博发布案例：

真解决EasyUi的 select 使用 class=“easyui-combobox“ 样式绑定onSelect/onChange事件

Bootstrap3 Toast的Bootoast消息框插件使用

jquery实现图片预览（纯jquery实现）

javaScript和jQuery获取、设置textarea标签的内容（常见问题）

CSS3新增样式

jQuery库 distpicker库实现省市区三级联动效果（超简单版）

JQuery跨站脚本漏洞与防范方法

JQuery前端之操作JSON的方法

jQuery的介绍

WEB前端知识点整理（JQUERY Bootstrap ECharts）

前端哥

真解决EasyUi的 select 使用 class=“easyui-combobox“ 样式绑定onSelect/onChange事件

Bootstrap3 Toast的Bootoast消息框插件使用

jquery实现图片预览（纯jquery实现）

javaScript和jQuery获取、设置textarea标签的内容（常见问题）

CSS3新增样式

jQuery库 distpicker库实现省市区三级联动效果（超简单版）

JQuery跨站脚本漏洞与防范方法

JQuery前端之操作JSON的方法

jQuery的介绍

WEB前端知识点整理（JQUERY Bootstrap ECharts）

1
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

2
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

3
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

4
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

5
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

6
导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

7
Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993

8
Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993

9
基于vue.js在线购物商城系统设计与实现(uni-app框架 PHP后台) 研究背景和意义、国内外现状

2024-02-04 11:02:02992

10
vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992

	<script src="jQuery.min.js"></script>
	<script>
	$(function(){
	// var targetObj={};
	// var obj={
	// id:0,
	// name:"xinyi",
	// location:"henan"
	// };
	// //覆盖以前的相同key值对应的数据
	// $.extend(targetObj,obj);
	// console.log(targetObj);

	var targetObj={};
	var obj={
	id:0,
	name:"xinyi",
	location:"henan",
	msg:{
	age:18,

	}
	};
	//覆盖以前的相同key值对应的数据
	$.extend(targetObj,obj);
	console.log(targetObj);
	})

	<style>
	div{
	margin:200px auto;
	width: 200px;
	height: 200px;
	background-color: pink;
	}
	.current{
	background-color: purple;
	}
	</style>
	<body>
	<div></div>
	</body>
	<script src="jQuery.min.js"></script>
	<script>
	// $('div').on({
	// mouseover: function(e) {
	// $(this).css('background',"skyblue");
	// },
	// click: function(e) {
	// $(this).css("background","purple");
	// },
	// mouseleave: function(e) {
	// $(this).css("background", "blue")
	// }
	// })
	$("div").on("mouseenter mouseleave",function(){
	$("div").toggleClass("current")
	})
	</script>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	</head>
	<style>
	ul li {
	list-style: none;
	cursor: pointer;
	}
	</style>
	<script src="jQuery.min.js"></script>
	<body>
	<div></div>
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	<ol></ol>
	<p>世界我来了</p>
	</body>
	<script>
	// 这样会造成全选
	// $("ul li").click(function() {

	// })
	//事件委托，每一个li都可以触发，给父元素绑定事件，点击子元素时触发
	$("ul").on("click", "li", function () {
	alert("11");
	});
	// 解除绑定：off
	// $("ul").off("click", "li")
	// 后来创建的元素也能继承之前的方法
	$("ol").on("click", "li", function () {
	alert("你好");
	});
	var li = $("<li>后来</li>");
	$("ol").append(li);
	$("ol").off("click", "li");
	// one：只触发一次
	$("p").one("click", function () {
	alert("22");
	});
	</script>
	</html>

JQUERY总结（四）

对象拷贝：

绑定多个事件：

事件委托和动态绑定以及解除绑定

微博发布案例：

微信扫一扫：分享