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

一、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():获取内容。

原文地址:https://www.cnblogs.com/gzy-tw/p/10140894.html

时间: 2024-08-29 11:06:17

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

浅入浅出---JQuery到底是什么?

学习完了JQuery之后,我便感觉云里雾里的,JQuery到底是什么,朦朦胧胧感觉到JQuery应该是javascript函数的封装,就应该像WinForm窗体应用程序中可以调用的系统函数,据之前所学的javascript,知道JavaScript是一种镶嵌在HTML文档中的一种脚本语言, <body> <formid="form1" name="form1" method="post" > <label for=&

Jquery:小知识;

Jquery:小知识: jQuery学习笔记(二):this相关问题及选择器 上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单个对象,也可以用于多个对象. $('btn').click(function(){ alert(this.innerHTML); // 单个对象,this指代当前id为btn的DOM对象 }); $('div').each

jQuery基础知识总结

1.  jQuery基本概念介绍   1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 1.2 为什么要学习jQuery write less do more 1.3 jQuery的使用 a.引包     b.入口函数     c.实现功能 1.4 版本介绍 3个版本 1.x      2.x     3.x 其中版本1兼容IE6/7/8,版本2和3实现的功能更多一些,版本3更适合最新的浏览器 每个大版

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

jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需要的朋友可以参考下 本身方法($.each,$.map,$.contains,$ajax) 常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格. 复制代码 代码如下: $.trim(' Hello ') // Hello (2)$.contains $.contai

web基础知识(三)关于ajax,Jquery传值最基础东西

今天补充一下两个小功能,一个是关于radio单选框的情况,如何在前面选了后,传到后台,编辑修改的时候再次传回来,并且在当时选的那个上:再一个就是关于添加小标签的时候添加接着弹出在下面,并点击出现删除. 一:radio 1 <div class="newlylist"> 2 <div class="newlyhead">图示商品:</div> 3 <div class="newlycontent">&

JQuery基础知识(2)

JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称. 2.JQuery slideUp();用于向上滑动元素 语法: $(selector).slideUp(speed,callback

jQuery基础知识

js与jQuery的比较与区别 js是脚本语言 jquery是用js开发出来的架构 1 定位元素 JS document.getElementById("abc") jQuery $("#abc") 通过id定位 $(".abc") 通过class定位 $("div") 通过标签定位 需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象.以下例子中假设已经定位了元素abc. 2 改变元素的内容 JS a

jQuery基本知识体系图

在w3school学习了jQuery,觉得看了一遍,代码敲了一遍,大概的知识点记住了,不过觉得还是把这些知识点,放到一张图上,形成自己的jQuery的知识体系.能做到,一看到jQuery,脑海就浮现jQuery整个的知识体系框架来. jQuery基本知识体系图,布布扣,bubuko.com

JQuery基础知识(1)

JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的参数,即hide(speed);隐藏的速度进行了限定.hide(1000)/show(1000); 2.JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度. JQuery的淡入淡出 1.JQuery fadeIn();此方法可以携带不同