欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery基本知识汇总;JQuery常用方法;浅入了解JQuery

程序员文章站 2022-06-14 23:42:01
一、jQuery对象与JavaScript对象 ①JavaScript入口函数比jQuery入口函数执行的晚一些; JQuery的入口函数会等页面加载完成才执行,但是不会等待图片的加载; JavaScript入口函数需要等待页面加载和图片加载完成才执行; JavaScript入口函数:window. ......

一、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对象

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

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

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

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

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

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

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

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

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

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

    val():获取内容。