一、属性操作

元素的尺寸

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知识盲点的更多相关文章

  1. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  2. jQuery 知识体系

    jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...

  3. jQuery知识集锦

      CreateTime--2017年2月16日14:00:22Author:MarydonjQuery知识集锦1.empty()与remove()的区别 <select id="ty ...

  4. jQuery知识重构

    jQuery知识重构 目录: 一.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery ...

  5. jQuery知识梳理20190818

    目录 jQuery知识梳理20190818 1. 时间绑定和解绑 2. 区别mouseover与mouseenter 3. 时间委托(委派/代理) 4 . 多库共存 5.window.onload与$ ...

  6. jQuery知识梳理20190817

    目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...

  7. JQuery知识快览之三—JQuery对象集

    本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...

  8. jquery知识 属性 css

    jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta chars ...

  9. 笔记7：Jquery知识

    jQuery 1 基本知识 jQuery 是一个 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.其下载地址:http://jquery.com/download/ ...

随机推荐

  1. ORACLE+PYTHON实战：复制A表数据到B表

    最近在学习python ,看到了pythod的oracle,不仅可以一次fetch多条,也可以一次insert多条,想写一个复制A表数据到B表的程序来看看实际效率能不能提高.写完发现,非常惊艳!效率提 ...

  2. LINQ学习系列-----3.1 查询非泛型集合

    一.问题起源 LINQ to object在设计时,是配合IEnumerable<T>接口的泛型集合类型使用的,例如字典.数组.List<T>等,但是对于继承了IEnumera ...

  3. Azure 基础：使用 Traffic Manager 分流用户请求

    为了减少 web 服务器的宕机时间,同时也提高服务器的响应性能,我们往往部署多个站点并通过负载均衡来对外提供服务.Azure 提供的 Traffic Manager 服务属于负载均衡的一种,特点是工作 ...

  4. C语言socket编程----实现UDP通信

    TCP/IP协议叫做传输控制/网际协议,又叫做网络通信协议.实际上,它包括上百个功能的协议. 套接字(socket):在网络中用来描述计算机中不同程序与其他计算程序的通信方式. 套接字分为三类; 流式 ...

  5. 贝叶斯来理解高斯混合模型GMM

    最近学习基础算法<统计学习方法>,看到利用EM算法估计高斯混合模型(GMM)的时候,发现利用贝叶斯的来理解高斯混合模型的应用其实非常合适. 首先,假设对于贝叶斯比较熟悉,对高斯分布也熟悉. ...

  6. VantPy自动化测试框架

    1.必须要谈的一点,就是我们学习自动测试不是用来炫耀的,而是用来提升自身能力的. 2.这个框架不是通用框架,只是在这里灌输这个框架的思想,让每个人写框架都易如反掌 3.如果没有python基础的同学, ...

  7. Codeforces 830C On the Bench

    题意:给你n个数,问有多少种排列方式使得任意两个相邻的数的乘积都不是完全平方数 我好弱,被组合和数论吊着打... 首先我们可以把每个数中固有的完全平方数给分离出来,那么答案其实就只与处理后的序列相关. ...

  8. dock使用方法

    Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docker 最开始由 Sol ...

  9. 高效管理http连接

    1.Http连接基础 Http协议承载了互联网上的主要流量,然而说到传输,还要回归到最基本的网络分层模型TCP/IP.TCP/IP是全球计算机及网络设备都在使用的一种常用的分组交互网络分层协议集.客户 ...

  10. speedment 入门教程

    speedment 是基于 Java8 的 orm 框架,相比较 hibernate 和 mybatis 你只要很少的代码就可以实现对数据库的操作,而且根据查询自动帮你优化SQL,开发者无需编写SQL ...