浅识JQuery基础(一)

简介: JQuery官方解释: jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQuery官方解释:


 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

20161129141905729.png


一、属性

 属性部分都是通过各个方法设置或返回选中元素的属性值。最多使用atrr;

text设置某元素text属性,html设置某元素html部分的属性,val,设置某元素val部分的属性;


二、事件


1clickready方法()


ready() 函数规定当 ready 事件发生时执行的代码。

   ready() 函数仅能用于当前文档,因此无需选择器。

   事件可以卸载;


2遍历

可以遍历数组中的元素的内容,键值对;和层选择器的内容有相似的地方;


3、合成事件


Hover(fn1,fn2):  fn1表示mouseover的处理函数,fn2表示mouseout的处理函数;


   Toggle(fn1,fn2…fnN ):当元素被click后,轮流执行fn1,fn2,fnN方法;


   One(type,fn):表示注册的时间只相应一次,然后失效,type表示事件类型;



4、文档的处理


创建元素:


       $('标签字符串')


   添加元素:


       append(),appendTo()


       Prepend(),prependTo()


       After(),insertAfter()


       Before(),insertBefore()


   动态删除元素:


       Enpty() :清空子元素


       remove(selector):无参表示把自己移除掉,有参表示移除复合选择题的元素


三、样式处理:


1、样式操作:


CSS(),按照键值对的格式对样式进行设置;

   如果只设置一个样式,则可直接赋值,如css'color','red';

   如果设置多个样式,则使用css{1:值1,键2:值2})的格式

操作后生成的代码都是对标签的style属性进行设置



2、类操作:


addClass. hasClass,removeClass, toggleClass

   也可以使用属性方法操作:

   Attr('class','className');


四、选择器:

选择器大全:

http://www.cr173.com/html/21124_1.html



五、隐式迭代和链式编程

1、隐式迭代:


不用自己去写for遍历 dom数组了,自动为每个数组元素循环加了执行方法,隐藏起来 迭代 赋予每个数组元素 执行方法。对于满足条件的每个对象重复执行,比如,对btn类采取同样的操作(通过选择器来进行选择)。


2、链式编程:



调用完一个方法后不用重新获取对象,继续.,只需选择一次。使用层级和过滤选择器后会将原有的链破坏,不能继续.此时用end(),恢复到最近的一次;


比如:我们设置一个控件的属性,使用lable.caption =;lable.name=;lable.width=;等,但是使用迭代后,可以直接lable.caption().name().width();


   以上我是我对JQuery的整体的认识,希望能对刚学习JQuery的朋友带来帮助,如有错误,请指点。



相关文章
|
5月前
|
算法 vr&ar 图形学
☆打卡算法☆LeetCode 188. 轮转数组 算法解析
☆打卡算法☆LeetCode 188. 轮转数组 算法解析
|
存储 JavaScript 前端开发
📕 重学JavaScript:怎么处理arguments这种伪数组?
平时我们写代码的时候,有没有想到过这样的问题:类似于func01(num, name){} 中的 num, name 到底是什么类型的呢?我们该怎么处理它呢?
73 0
|
设计模式 JavaScript 前端开发
jQuery基础
jQuery基础
111 0
jQuery基础
|
JavaScript 前端开发 API
jQuery基础知识
jQuery基础知识
119 0
|
JavaScript 前端开发 程序员
JQuery基础(一篇入门)
JQuery基础(一篇入门)
93 0
|
JavaScript 前端开发 索引
前端学习:jQuery基础知识
前端学习:jQuery基础知识
124 0
前端学习:jQuery基础知识
|
前端开发 编译器
让人头秃的promise-then执行顺序问题
`Promise`对于前端开发来说应该不陌生了,其主要用于在一个异步操作中返回结果值,并且支持链式调用。今天就来讨论一个`Promise`链式调用相关的面试题。
729 0
让人头秃的promise-then执行顺序问题
|
JavaScript
jQuery基础1
jQuery基础1
|
设计模式 JavaScript 前端开发
jQuery基础操作
jQuery基础操作
182 0
jQuery基础操作
☆打卡算法☆LeetCode 27、移除元素 算法解析
“移除所有数值等于 val 的元素,返回移除后数组的长度。”