jQuery知识盲点
一、属性操作
元素的尺寸
width() height()
innerWidth() innerHeight()
outerWidth() outerHeight()
$('div').width() ; //width $('div').innerWidth() ; //width + padding $('div').outerWidth() ; //width + padding + border $('div').outerWidth(true); //width + padding + border + margin
//$('#div1').width(200); //$('#div1').innerWidth(200); //width : 200 - padding //$('#div1').outerWidth(200); //width : 200 - padding - border $('#div1').outerWidth(200,true); //width : 200 - padding - border - margin
//alert( $('#div1').get(0).offsetWidth ); //原生JS是获取不到隐藏元素的尺寸 alert( $('#div1').width() ); //JQ是可以获取隐藏元素的尺寸
//alert( $(window).height() ); //可视区的高 alert( $(document).height() ); //页面的高
//alert( $(document).scrollTop() ); //滚动距离 //$(document).scrollTop() == $(document).height() - $(window).height()
二、DOM操作
insertBefore() before()
insertAfter() after()
appendTo() append()
prependTo() prepend()
append() : 把元素添加到指定的节点的里面的最后
prepend() : 把元素添加到指定的节点的里面的最前面
before() : 把元素添加到指定的节点的前面
after() : 把元素添加到指定的节点的后面
1.insertBefore
<body>
<div>div</div>
<span></span> <script>
$(function () {
$('span').insertBefore($('div'));
//把span 标签放到div的前面,类似剪切功能与js的用法一致
//结果显示
/*
<span>span</span>
<div>div</div>
*/
});
</script> </body>
2、insertAfter()
在原生js中是没有改方法的,用法与insertBefore类似
3.appendTo()
与原生的js中appendchild 用法类似的
<body>
<span>span</span>
<div>div</div> <script>
$(function () {
$('span').appendTo($('div'));
//结果显示 span在div里面的最后位置
/*
<div>
div
<span>span</span>
</div>
*/
});
</script> </body>
4.prependTo()
<body>
<span>span</span>
<div>div</div>
<script>
$(function () {
$('span').prependTo($('div'));
//结果显示 span在div里面的最前的位置
/*
<div>
<span>span</span>
div
</div>
*/
});
</script>
</body>
before() after() append() prepend()与之前是对应的
如before()
<body>
<span>span</span>
<div>div</div>
<script>
$(function () {
$('span').before($('div'));
//结果显示 这个before更像动词,把div放到了span的前面,
/*
<div>div</div>
<span>span</span>
*/
});
</script>
</body>
三、get JQ转为原生的
$(function(){ //alert( $('div').get(0).innerHTML );get() : 把JQ转成原生JS , 默认情况获取的是一个原生的集合,那么可以通过参数来找到集合中的指定项 alert( $('div').eq(0).html() ); });
四、事件细节
ev : event对象
在jquery中直接用ev 不需要再向js要做兼容处理var ev=ev || window.event
<body>
<span>span</span>
<div>div</div>
<script> /*$('div').click(function(ev){ //ev : event对象 //ev.pageX(相对于文档的) 与js中的 clientX(相对于可视区)类似 //ev.which(键值) : js keyCode ev.preventDefault(); //阻止默认事件 ev.stopPropagation(); //阻止冒泡的操作 return false; //阻止默认事件 + 阻止冒泡的操作 });*/ $('div').one('click',function(){ //只执行事件一次
alert(123);
}); </script>
</body>
jQuery知识盲点的更多相关文章
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- jQuery 知识体系
jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...
- jQuery知识集锦
CreateTime--2017年2月16日14:00:22Author:MarydonjQuery知识集锦1.empty()与remove()的区别 <select id="ty ...
- jQuery知识重构
jQuery知识重构 目录: 一.入口函数 1 $(document).ready(function(){}); 2 $(function(){}); jQuery ...
- jQuery知识梳理20190818
目录 jQuery知识梳理20190818 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托(委派/代理) 4 . 多库共存 5.window.onload与$ ...
- jQuery知识梳理20190817
目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...
- JQuery知识快览之三—JQuery对象集
本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...
- jquery知识 属性 css
jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta chars ...
- 笔记7:Jquery知识
jQuery 1 基本知识 jQuery 是一个 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.其下载地址:http://jquery.com/download/ ...
随机推荐
- DOM操作基本用法
本文列举了js中DOM选取的基本用法,在列表中没有id的情况下如何选取到需要的一项,代码如下: <h2>获取Jerry的js代码</h2> <ul id="fi ...
- PAT B1045 快速排序(25)
1045. 快速排序(25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 著名的快速排序算法里有一个经典的划分 ...
- linux使用mysql给一个用户赋予一个权限
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION;
- LNMP1.3 一键配置环境,简单方便
系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要3GB以上硬盘剩余空间 需要128MB以上内存(如果为128MB的小内存VPS,Xe ...
- appium测试准备记录
一 获取应用程序包名(手机中不安装apk) windows 环境下: aapt工具 使用aapt工具,适合给程序自动获取apk的相关信息. //aapt 是sdk自带的一个工具,在SDK/buildt ...
- PHP开发中需要注意几点事项,新手少走弯路必备知识
这篇文章主要介绍了PHP开发需要注意的几点事项总结,非常详细,需要的朋友可以参考下.新手多看看避免走弯路. 1.使用内嵌的HTML代码,而不是PHP的echo语句. 因为PHP是一门嵌入式Web编程语 ...
- 自己定义View Controller转换动画
原文链接 : Introduction to Custom View Controller Transitions and Animations 原文作者 : joyce echessa 译文出自 : ...
- hihoCoder_二分·归并排序之逆序对
一.题目 题目1 : 二分·归并排序之逆序对 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描写叙述 在上一回.上上回以及上上上回里我们知道Nettle在玩<艦これ&g ...
- ASP.MVC当URL跳转时候参数的安全性
一个页面跳转到另外一个页面直接将参数写在URL上面并不安全比如 http://XXXXXXXXXXX/meeting/shakeGroup?id=5381&uid=o0En_sj1J0bFgI ...
- Lua代码提示和方法跳转
前言 当在一个大型工程中编写大量的lua脚本时,代码提示和方法跳转等功能很实用,据我所了解的目前除LuaStudio之外,似乎还没有一个很好的编辑器.但今天讲述的是Idea +EmmyLua插件 达到 ...