14-1 jquery的dom操作和事件对象
一 jquery的操作有，插入，修改，删除，克隆。具体见下方代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
</head>
<style>
div {
background-color: green;
height: 200px; } .active {
font-size: 20px;
}
</style>
<body>
<ul> </ul>
<p class="app">风调雨顺</p> <button>
<!--<input type="submit" value="克隆按钮">-->
<input type="submit" value="克隆">
</button> <!--导入js-->
<script src="jquery-3.3.1.min.js"></script>
<!--插入操作 -->
<!--语法：父元素.append(子元素)-->
<script> //jquery操作文档的方式,注意到导入jquery包
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';//字符串
$("ul").append('<li>1233</li>');//js对象
$('ul').append(oli);
$('ul').append($('.app'));//jquery对象
// 注意如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。app这个p标签本来是在外面的，追加
// 之后就移动到了ul标签里面
</script> <!--知识点2，-->
<!--子元素.appendTo(父元素)-->
<script>
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')//追加子元素li到父元素ul里面并且添加class=active
</script> <!--知识点3;语法：父元素.prepend(子元素) 解释：前置添加， 添加到父元素的第一个位置-->
<script>
$('ul').prepend('<li>我是第一个</li>')
</script> <!--知识点4 语法：父元素.prependTo(子元素)解释后置添加， 添加到父元素的最后一个位置-->
<!--<script>-->
<!--$('<li>我是最后一个</li>').prependTo($('ul'))--> <!--</script>-->
<!--知识点5语法：父元素.after(子元素)； 子元素.inserAfter(父元素)；解释：在匹配的元素之后插入内容 --> <script>
$('ul').after('<h4>我是一个h4标题</h4>');
$('<h5>我是一个h5标题</h5>').insertAfter('ul');
</script>
<!--知识点6 语法：父元素.before(子元素)；子元素.inserBefore(父元素)；解释：在匹配的元素之前插入内容 -->
</body>
<script>
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
</script>
<!--二 克隆操作-------------------------------------------------------------------------语法：$(选择器).clone();-->
<script>
$('button').click(function() { // 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)就是克隆之后的按钮也具有克隆的功能
$(this).clone(true).insertAfter(this);
})
</script> <!--<###############;三修改操作-######################################################################-->
<!--语法$(selector).replaceWith(content); 解释：将所有匹配的元素替换成指定的string、js对象、jquery对象。-->
<script>
$('h5').replaceWith('<a href="#">hello world</a>');//将所有的h5标题替换为a标签
$('h2').replaceWith($('.app'));//将所有h2标题标签替换成class为app的dom元素,自身所在的位置也会消失
$('li').replaceWith($('h3'))
</script>
<!--知识点2 replaceaAll 替换所有-->
<script>
$('<p>哈哈哈</p>').replaceAll('h4');//将所有的h4标签替换成p标签
</script>
<!--###########################四删除操作################################################-->
<!--知识点1 语法$(selector).remove(); 解释：删除节点后，事件也会删除（简言之，删除了整个标签）-->
<script>
// $("button").remove(); </script>
<!--知识点2 语法：$(selector).detach();解释：删除原有的节点后，事件会保留-->
<script>
var $btn = $('button').detach();
//此时按钮能追加到ul中
$('ul').append($btn) </script>
<!--知识点3 语法：$(selector).empty(); 解释：清空选中元素中的所有后代节点-->
<script>
$('ul').empty()
</script> </html>
二 jquery事件对象
解释： Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 1 什么时候会产生Event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象 2.事件通常与函数结合使用，函数不会在事件发生前被执行！
常用的是这三个：
target 返回触发此事件的元素（事件的目标节点）。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action=""> </form>
<a href="http://www.baidu.com" title="">百度</a>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
formDom(); function formDom(argument) {
$('form').append(`
<label>用户名</label>
<input type="text" id='user'>
<input type="submit">`);
} // 点击 type='submit'的按钮 会触发 form表单的submit事件
$('form').submit(function (event) {
// alert(event); // 阻止from表单的默认行为
event.preventDefault();
console.log(event)
}); // 实时监听input输入框内的value 通过oninput事件
$('#user')[0].oninput = function (event) {
console.log(event.target.value); //获取最后一个值
};
//阻止a标签的默认行为
$('a').click(function (event) {
event.preventDefault();//阻止默认事件代表点击之后不跳转
// console.log(event);
event.stopPropagation();//阻止a标签冒泡 就是当a标签点击完成之后，不再往body，html,document下面关联
// //下面这三个返回的内容是一样的，当结合冒泡使用的时候 event.target就是点击的当前的对象（内层的标签） / currentTarget指的是当前的标签 // console.log(event.target);
// console.log(event.currentTarget);
// console.log(this);
console.log('a标签点击了')
});
})
</script>
</body>
</html>
14-1 jquery的dom操作和事件对象的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
随机推荐
- poj 2398 Toy Storage(计算几何 点线关系)
Toy Storage Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4588 Accepted: 2718 Descr ...
- redis教程(二)-----redis事务、记录日志到redis、分布式锁
redis事务 Redis 事务可以一次执行多个命令, 并且带有以下两个重要的保证: 批量操作在发送 EXEC 命令前被放入队列缓存. 收到 EXEC 命令后进入事务执行,事务中任意命令执行失败,其余 ...
- vim 的列操作
删除列1.光标定位到要操作的地方.2.CTRL+v 进入“可视 块”模式,选取这一列操作多少行.3.d 删除. 插入列插入操作的话知识稍有区别.例如我们在每一行前都插入"() ": ...
- 洛谷P1968 美元汇率[2017年4月计划 动态规划02]
P1968 美元汇率 题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能 ...
- listview显示固定条数
看了很多网上其他大神的,感觉还是在listview的adapter中的getCount中下手比较好点 毕竟计算高度等等,那会让辅助的布局会一团糟,例如下面的搜索历史只显示四条,布局中有横向listvi ...
- js实现翻转一个字符串
字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.在这里介绍几种翻转字符串的方法. (1)使用字符串函数 //使用数组翻转函数 function reverseString ...
- css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...
- vue中router以及route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- Redis 扫盲
Redis扫盲 非关系型数据库分类: 键值存储数据库:主要会使用到一个 Hash 表,这个表有一个特定的键和一个指针指向特定的数据,Redis 列存储数据库:应对分布式存储的海量数据,键仍然存在,但是 ...
- Gradle基本操作入手
Gradle本身的领域对象主要由Project和Task.Project为Task提供了执行上下文,所有的Plugin要么向Project中添加用于配置Property,要么向Project中添加不同 ...