jQuery初识

  • Post author:
  • Post category:其他


在学习完js之后就步入了jQ的学习,都知道,js的原生代码敲起来很头疼,像创建DOM节点和获取节点这样的难点,很多人学习起来就会有一定的难度,但是jQ就不同了。


jQuery是由美国人


John Resig





2006


年初创建,至今已吸引了来自世界各地的众多


javascript


高手加入其团队中。


事实上,jQuery就是一个快速的、简洁的JavaScript库,能够使用户能更方便地处理


HTML documents





events


、实现动画效果,并且方便地为网站提供


AJAX交互。而且在使用时,能够使用户的


html


页保持代码和


html


内容分离,也就是说,不用再在


html


里面插入一堆


js


来调用命令了,只需


使用选择器查找


即可,非常好用!


随着各大网站逐渐抛弃IE,jQuery也发布了大版本3.x.x,就算IE现在还盛行,那也要遵循一句话:“珍爱生命远离IE!”jQuery的最大优点就是“写的更少,做的更多”,有事半功倍的效果。


jQuery第一讲讲到了几个单词和一些要学习的方法:


query


查询


load


加载


ready


准备


document


文档


toggle


切换


get


获取


show()


显示



hide()


隐藏


toggle()   切换



css


()


css


获取


/


设置



html()    html


内容获取


/


设置


text()


文本获取


/


设置


val


()


表单值获取


/


设置


addClass


()


添加类


removeClass


()


移除列


toggleClass


()


切换类


接下来,进入正题


1.window.onload


window.onload


方法长久以来是程序员解决客户端页面载入问题的一个方法,只有少数大型的图片文件会被快速的载入,而大部分大型的图片文件会使


window.onload()


载入的很慢


.


jQuery


有一个用来作为


DOM


快速载入


javascript


的得心应手的小函数


,


那就是


ready()


方法


$(document).ready(function() {});


可简写为:


$(function(){});

2

.

jQuery对象与DOM对象转换



定义


DOM


对象


JavaScript


方式


var id=document.getElementById(“id”);


jQuery


方式


var $id=$(“#id”);


说明:


jQuery


对象是一个类数组对象,可以通过


[index]


的方法得到相应的


DOM


对象


jQuery


对象转换成


DOM


对象


var $id=$(“.d”);       ——》》》


得到一个


jQuery


数组对象


$id


var id=$id[0];          ——》》》         得到数组中的第一个


DOM


对象


另外也可以使用:


var id=$id.get(0);


Dom


对象转换为


jQuery


对象


var id=document.getElementById(“id”);


var $id=$(id);


3.jQ的使用

jQ执行的基本代码,很容易看懂,大家自行理解

控制台如下:

4.jQ的获取与切换

使用btn按钮,通过toggle来切换p标签的内容,

实现效果如下:

每次单击按钮1或按钮2都会实现显示或隐藏的效果。

5.jQ和js的相互转换

大家可以从代码中看到,jQ转js可以通过“$(“”)[index]”或者“$(“”).get(index)”来实现,这里的index指的是下标;js转jQ就很简单了,$(js对象)就可以了。

今天的jQ初识部分就先到这里了,希望大家可以喜欢,有不懂的问题可以随时在评论区提出来,我会第一时间帮大家解决问题。



版权声明:本文为weixin_43424900原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。