JQuery初识(三 )
2024-10-20 00:34:38
一丶JQuery的文档操作
1.插入操作:
父元素.append(子元素)
解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng|element(js对象)|JQuery元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
如果追加的是JQuery对象那么这些元素将从原位置上消失.简言之,就是一个移动操作.
子元素.appendTo(父元素)
解释:追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
要添加的元素同样既可以是string丶element(js对象)丶JQuery元素
父元素.prepend(子元素)
解释:前置添加,添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
子元素.prependTo(父元素)
解释:前置添加,添加到父元素的的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul')
兄弟元素.after(要插入的兄弟元素)
要插入的兄弟元素.inserAfter(兄弟元素)
解释:在匹配的元素之后插入内容
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
兄弟元素.before(要插入的兄弟元素)
要插入的兄弟元素.inserBefore(兄弟元素)
解释:在匹配的元素之后插入内容
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
2.克隆操作
$(选择器).clone()
解释:克隆匹配的DOM元素
$('button').click(function() { // 1.clone():克隆匹配的DOM元素
// 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
3.修改操作
$(selector).replaceWith(content)
将所有匹配的元素替换成指定的string丶js对象丶JQuery对象
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
$('<p>哈哈哈</p>')replaceAll('h2')
解释:替换所有.将所有的h2标签替换成p标签
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4.删除操作
$(selector).remove()
解释:删除节点后,事件也会删除(简言之,删除了整个标签)
$('ul').remove();
$(selector).detach()
解释:删除节点后,事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
$(selector).empty()
解释:清空选中元素中的所有后代节点
//清空掉ul中的子元素,保留ul
$('ul').empty()
二丶JQuery的位置信息
1.宽度和高度
获取宽度 .width()
描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width)
和 .width()
之间的区别是后者返回一个没有单位的数值(例如,400
),前者是返回带有完整单位的字符串(例如,400px
)。当一个元素的宽度需要数学计算的时候推荐使用.width()
方法 。
设置宽度 .width(value)
描述:给每个匹配的元素设置css宽度.
获取高度 .height()
描述:获取匹配元素集合中的第一个元素的当前计算高度
这个方法不接受任何参数
设置高度 .height()
描述:设置每一个匹配元素的高度值.
2.innerHeight()和innerWidth()
获取内部宽 .innerWidth()
描述:为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border.
这个方法不适用于window和document对象,对于这些对象可以使用 .width()代替
设置内部宽 .innerWidth(value)
描述; 为匹配集合中的每一个元素设置CSS内部宽度.如果这个"value"参数提供一个数字,JQuery会自动加上像素单位(px)
获取内部高 innerrHeight()
描述:为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border.
这个方法不适用于window和document对象,对于这些对象可以使用.height()代替
设置内部宽: innerHeight(value)
描述:为匹配集合中的每个元素设置CSS内部高度.如果这个"value"参数提供一个数字,JQuery会自动加上像素单位(px)
3.outWidth和outHeight()
获取外部宽 .outerWidth([includeMargin])
描述:获取匹配元素集合中第一个元素的当前计算外部宽度(包括padding,border和可选的margin)
includeMargin(默认: false)
类型; Boolean
一个布尔值,表面是否在计算时包含元素的margin值
这个方法不适用于window和document对象,可以使用 .width()代替
设置外部宽: .outerWidth(value)
描述:为匹配集合中的每个元素设置 CSS外部宽度
获取外部宽 .outerHeight([includeMargin])
描述:获取匹配元素集合中第一个元素的当前计算外部高度(包括padding,border和可选的margin)
includeMargin(默认; false)
类型: Boolean
一个布尔值,表明是否在计算时包含元素的margin值
这个方法不适用于window和document对象,可以使用.width()代替
设置外部高 .outerHeight( value)
描述:为匹配集合中的每个元素设置CSS外部高度
4.偏移
获取 .offset()
返回值:Object 。.offset()
返回一个包含top
和 left
属性的对象 。
描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。
注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden
,那么我们依然可以取得它的坐标
设置 .offset(coordinates)
描述;设置匹配元素集合中每一个元素的坐标,坐标相对于文档
coordinates
类型: Object
一个包含top和left属性的对象,用整数指明元素的新顶部和左边坐标
$("p").offset({ top: 10, left: 30 });
5.元素坐标
.position()
返回值:Object{top,left}
描述:获取匹配元素中第一个元素的当前坐标,相对于offset paren的坐标(offset parent指离该元素最近的而且被定位过的祖先元素)
当把一个新元素放在同一个容器里面另一个元素附近时,用 .position()更好用
6.滚动距离
水平方向:
获取: .scrolLeft()
描述:获取匹配的元素集合第一个元素的当前水平滚动条的位置(页面卷走的宽度)
设置: .scrolLeft(value)
描述:设置每个匹配元素的水平方向滚动条位置
垂直方向:
获取: .scrollTop()
描述:获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)
设置: .scrollLeft(value)
描述:设置每个匹配元素的垂直方向滚动条位置
最新文章
- 第四章 springboot + swagger
- AI图片剪切
- Quick-Cocos2dx 快速了解
- BZOJ 1704: [Usaco2007 Mar]Face The Right Way 自动转身机( 贪心 )
- 动态加载与插件系统的初步实现(3):WinForm示例
- ACM Fibonacci数 计算
- PHP获取文件的绝对路径
- Elasticsearch java api 基本搜索部分详解
- Sharepoint对List增删改操作
- Linux重启命令
- Apache Commons 工具类简单使用
- 小白入门使用Nginx基础的常用操作
- react之shouldComponentUpdate简单定制数据更新
- [UE4]最简单的虚幻4网络游戏,使用虚幻4内置服务器
- python特殊的数据类型
- JavaScript深入解读
- Laravel Model 的 fillable (白名单)与 guarded (黑名单)
- 使用SQLite3工具查看sqlite.db文件
- Map的复制
- Asp.Net MVC4 之Url路由
热门文章
- Material使用10 MdRadioModule、MdDatepickerModule、MdNativeDateModule、MdSelectModule
- sell02 展现层编写
- SpringMVC RESTful中文乱码
- 2017Java学习路线图,内附完整Java自学视频教程+工具经验+面试
- 【linux-./configure 配置文件时出错问题】
- 001.SQLServer高可用简介
- 为什么MOBA和吃鸡类游戏不推荐用tcp协议 延迟不利于实时游戏
- Solr 6.7学习笔记(02)-- 配置文件 managed-schema (schema.xml) -- 样例(6)
- 洛谷 P1439 【模板】最长公共子序列LCS 解题报告
- 洛谷P1505 [国家集训队]旅游