一、jQuery对象与JavaScript对象

  ①JavaScript入口函数比jQuery入口函数执行的晚一些;

  JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载;

  JavaScript入口函数需要等待页面加载和图片加载完成才执行;

  JavaScript入口函数:window.onload = function(){};

  JQuery入口函数:①$(document).ready(function(){});

             ②$(function(){});

  ②JQuery对象与Dom(JavaScript对象)对象的区别:

    DOM对象:使用JavaScript方式获取到的元素是DOM对象。

    JQuery对象:使用JQuery方式获取到的元素是JQuery对象。

  ③JQuery对象与DOM对象的联系:

    1、JQuery对象其实就是JavaScript对象的集合,JQuery对象里面存放了一大堆JavaScript对象。

    2、JQuery对象不能与Dom对象相互调用{$("li").setAttribute("name","he");   //代码报错

                     document.getElementById("section").show();//代码报错  

    }

    3、DOM对象转JQuery对象:

        var cloth = document.getElementById("cloth");    //这是DOM对象

        $(cloth).innerText("测试");

      JQuery对象转DOM对象:

        var $li = $("li");

        $li[0].style.backgroundColor = "red";  //利用取下标的方式将JQuery对象转换成DOM对象

        或者$li.get(0).style.backgroundColor = "red";   //利用get()方法也能达到同样效果

二、JQuery常用方法

  ①index()方法:返回当前元素在所有兄弟元素当中的索引

    <li><a>1</a></li>

    <li><a>2</a></li>

    <li><a>3</a></li>

    $(function(){

      $("li").click(function(){

        console.log($(this).index());

      });

    });

  ②CSS操作

    隐式迭代:设置操作的时候会给JQuery内部的所有对象都设置上相同的值,获取的时候只返回第一个元素对应的值。

    addClass():添加一个类,不影响之前存在的类。

    removeClass():移除一个类。

    hasClass():判断一个类是否存在。

    toggleClass():切换类,如果类存在就移除,没有就添加。

  ③属性操作

    attr(name,value):使用方法$("img").attr("alt","图片不存在");

    对于布尔值类型的属性,不使用attr()放法,应该使用prop()放法,用法与attr()一样。

  ④动画操作

    show(): 可以传参数,也可不传参数;不传参数则没有动画效果,参数可以是好毫秒值,也可以是字符串:fast=200ms、normal=40ms、slow=60ms。

    hide():隐藏。

    slideDown():向上滑入可接收两个参数,slideDown(1000,function(){})。

    slideUp():向上滑出。

    slideToggle():如果是滑入状态就滑出,反之。

    fadeIn():淡入。

    fadeOut():淡出。

    fadeToggle():切换淡入淡出。

    自定义动画animate()

      1、第一个参数,必填:是一个对象,需要动画的样式。

      2、第二个参数:执行时间。

      3、第三个参数:动画执行效果。

      4、第四个参数:回调函数。

    stop()方法:停止当前执行的动画,一般写在动画前面停止别人的动画立即执行自己的动画。

      1、例如:.stop.slideDown();    //立即执行slideDown()

      2、第一个参数:是否清除动画队列,ture是;false否。

      3、第二个参数:是否跳转到当前动画的最终状态效果:true是,false否。

    音乐播放是DOM对象,不能调用eq(),需要使用get()获取。

  ⑤创建JQuery对象直接将标签写在$()中,JavaScript中使用creatElement创建对象。

    append():添加节点到子元素的最后面。

    prepend():添加节点到子元素的最前面。

    appendTo():把节点添加到父元素中,参数是父元素。

    perpendTo():把节点添加到父元素中的最前面,参数是父元素。

    after():添加到父元素的后面。

    before():添加到父元素的前面。

    empty():清空一个元素的内容,并且会把对应的事件也清空。

    html(""):把元素内容设置为空,不会清除内容上的事件。

    remove():删除节点,与empty()是清除子节点;remove是清除自己和后代节点。

    clone(): 参数false不会复制内容绑定事件,true同时复制内容绑定事件。

    val():获取标签中的内容。

    html(): 可以识别标签,效果与JavaScript中的innerHTML方法相同。

    text():不能识别标签,效果与JavaScript中innerText相同。

    width():获取盒子的宽度。

    height():获取盒子的高度。

    innerWidth():获取padding+width的值。

    outerWidth():获取padding+width+border的总值。如果这个方法中传入参数true就获取padding+width+border+margin的值。

    scrollTop()与scrollLeft()设置或者获取垂直滚动条的位置。

    offset():获取元素相对于document的位置。

    position():获取元素相对于有定位的父元素的位置。

JQuery基本知识汇总;JQuery常用方法;浅入了解JQuery的更多相关文章

  1. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  2. 最全的jQuery知识汇总

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

  3. 浅入浅出---JQuery究竟是什么?

    学习完了JQuery之后.我便感觉云里雾里的,JQuery究竟是什么.朦朦胧胧感觉到JQuery应该是javascript函数的封装.就应该像WinForm窗口应用程序中能够调用的系统函数,据之前所学 ...

  4. jquery知识汇总

    jQuery 选择器 选择器                  实例                                   选取 *                          $ ...

  5. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  6. Jquery:小知识;

    Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器   上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理 ...

  7. jQuery自带的一些常用方法总结

    jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需 ...

  8. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  9. jQuery数组处理汇总

    jQuery数组处理汇总   有段时间没写什么了, 打算把jquery中的比较常用的数组处理方法汇总一下 $.each(array, [callback])遍历,很常用 1 2 3 4 5 6 7 8 ...

随机推荐

  1. SDWebImage之SDWebImageManager

    SDWebImageManager是SDWebImage的核心类.它拥有一个SDWebImageCache和一个SDWebImageDownloader属性,分别用于图片的缓存和下载处理.虽然是核心类 ...

  2. VS工具栏没有出现可用工具的情况

    (1)没有切换到资源视图,打开具体的对话框. (2)如果你在调试状态,即使打开了具体的对话框,VS工具箱还是不会出现可用的控件的.所以不要在调试状态下添加控件.

  3. Mybatis框架二:增删改查

    这里是搭建框架和准备数据: http://www.cnblogs.com/xuyiqing/p/8600888.html 实现增删改查功能: 测试类: package junit; import ja ...

  4. MySQL 组提交(group commit)

    目录 前言 改进 原理 实现 参数 注意 前言 操作系统使用页面缓存来填补内存和磁盘访问的差距 对磁盘文件的写入会先写入道页面缓存中 由操作系统来决定何时将修改过的脏页刷新到磁盘 确保修改已经持久化到 ...

  5. nginx代理tomcat做负载

    先对三台服务器统一环境. 对两台tomcat服务器的操作 查看jdk环境 # java -version openjdk version "1.8.0_65" OpenJDK Ru ...

  6. JavaScript 交换数组元素位置的几种方式

    前言 交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式. 第三方变量 最基础的方式,创建一个变量作为中转. let temp = array[index1]; array[index1 ...

  7. 04-TypeScript中的方法新功能(上)

    在TypeScript中,提供了一些函数的新功能,能够简化JavaScript中的一些比较复杂代码才能实现的一些能力. 在C#后端语言中,能够对方法传递的参数指定params关键字,也就是可以传递任意 ...

  8. Java高并发情况下的锁机制优化

    本文主要讲并行优化的几种方式, 其结构如下: 锁优化 减少锁的持有时间 例如避免给整个方法加锁 1 public synchronized void syncMethod(){ 2 othercode ...

  9. Jstl标签汇总

    JSTL的核心标签库标签共13个,使用这些标签能够完成JSP页面的基本功能,减少编码工作. 从功能上可以分为4类:表达式控制标签.流程控制标签.循环标签.URL操作标签.  (1)表达式控制标签:ou ...

  10. baguetteBox.js - 简单易用的 lightbox 插件

    baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 在线演示  ...