浅识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的朋友带来帮助,如有错误,请指点。



相关文章
|
8月前
|
Java Python
星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来
星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来
|
设计模式 JavaScript 前端开发
jQuery基础
jQuery基础
99 0
jQuery基础
|
JavaScript 前端开发 API
jQuery基础知识
jQuery基础知识
|
JavaScript 前端开发 程序员
JQuery基础(一篇入门)
JQuery基础(一篇入门)
86 0
|
JavaScript 前端开发 索引
前端学习:jQuery基础知识
前端学习:jQuery基础知识
前端学习:jQuery基础知识
|
JavaScript
jQuery基础1
jQuery基础1
|
前端开发
冇事来学系--Vue2.0中Promise详讲(下)
then-fs的基本使用 可以通过node下载then-fs。 npm install then-fs
134 0
|
设计模式 JavaScript 前端开发
jQuery基础操作
jQuery基础操作
170 0
jQuery基础操作
|
JavaScript 前端开发 Java
前端基础五之jQuery基础
前端基础五之jQuery基础
100 0
前端基础五之jQuery基础
|
前端开发 JavaScript
一入前端深似海,从此红尘是路人系列第三弹之浅析JavaScript闭包
前言:最近由于公司项目太忙,很久没有更新博客了,加上之前就一直说要发表一篇有关闭包的博客帮助小伙伴们好好的理解一些JavaScript中的难点。所以,今天趁着国庆假期前赶紧写了去,写完国庆好好出去浪个够。
1769 0