Jquery1.4.1 学习
Jquery1.4.1
在工作中也用过好几次jquery了,认识它还是好几年前的时候。但也就是用什么功能就打开api直接查,还没怎么总结过,呵呵,感觉工作中的总结还是有必要的,虽然工作中用过了,但是最后阶段的总结可能比工作中的收获更大、更多。
下面就总结下自己常用的功能与体会:
- 我们要做的第一件事情就是一定要先分清楚jquery对象与dom对象,很简单:Jquery对象的方法在jquery手册中,dom对象的方法去dhtml手册中查找。很高兴在jQuery核心函数中提供了dom对像->jQuery对象的转换,是通过$(element)实现的,element可以是dom对象,也可以是一个jquery对象。
- $(document).ready(function(){}) == $(function(){})
两者其实是一样的功能,提供页面加载完之后执行某项功能,并且它提供了链接的功能,这意味我们可以把多个函数连接在页面加载完之后执行,如下:
$(function(){
alert('第一次运行');
});
$(function(){
alert('第二次运行');
});
可window.onload = function(){}, 只会执行最后一次的函数 - $()方法除了将dom对象转换为jquery对象外,还有几个重载版本
1) 输入一个表达式查找对象 $(exp, [context]),在context中查找exp表达式代表的对象;
通常我一般不会指定context,我想jquery给出这个参数的原因是指定它的话效率会好些吧!
2) 可以直接把一个html字符串传进这个函数构建一个jquery对象
3) 传入html字符串的同时,并且指定一些属性
如:$(“<input>”, {type:””}).appenTo(“form”); - jQuery对象访问
通常jQuery方法获取的都是一个集合,用size()方法或者length属性都可以获取集合中的元素个数;each方法可以遍历集合,函数中this指针每次指向一个dom元素,每次还给函数传递一个代表元素在集合中位置的实参,并且我们可以用return false终止循环,return true使循环进行下一次循环; - get(), get(index),index();
get方法从集合中得到相应的dom对象,index方法提供2种方式:
1)集合在前, 查找元素作为参数
2)集合作为参数(seletor选择方式), 查找的元素在前 - 数据缓存的应用
在一次项目应用中发现这个方法,感觉很实用,我们平时存储数据的时候要么是把数据存在隐藏域中,要么是赋给某个元素的属性,现在好了,我们一步就可以设置数据缓存,很简单,只需$().data(name); - 选择器的应用
jQuery应该是在选择器的基础上应用的,我们可以通过元素的id, name, tagname等查找元素;我们要做的只是给$()函数传递一个所谓的seletor, 哈哈,学习jQuery时候一部分工作是在学习怎么构建一个合理的seletor来查找我需要的元素;
Seletor构建:
基本:
根据元素id, 类名, 元素名称定位;如果熟悉css的话很能理解jQuery这个seletor的规则,当我们定义css的时候也是这些规则
#id对单个元素设定 .class(元素name)一类元素 tagname同一种元素设置;
还好,我们可以通过逗号(,)来任意选择多个元素;:-D层级:
1.我们常常需要获取某个元素下面的子元素(分所有, 直接2种)
很简单:a b获取a下面所有b元素, a > b获取a下面直接子元素b
2.我们还经常获取元素同一级别的兄弟元素,如:我们需要紧挨着某个元素的元素;或者某个元素后面的所有弟兄元素;
同样简单:prev+next 获取紧挨着prev的next元素, prev~sibling获取prev后面所有 的同辈元素;集合内选择:
在通过selector选择出一个大概的集合,我们可能需要其中的某些元素,那么我们还有进一步操作的selector;
:first第一个, :last最后一个 :not去除某些元素 :eq, :gt, :lt等于,大于,小于某个索引的元素集合; 还可以直接获取索引号为奇数(:odd), 或者偶数(:event)得集合通过内容进一步筛选:
我们还可以对dom对象的内容进行筛选,包括是否包含某些文本,是否包含某个元素,其下是否空;包含了我们需要的所有操作;
:contains包含指定文本, :empty不含任何子内容
:has包含某个元素 :parent 含有子内容可见性:
通过:hidden 查找所有隐藏的元素, :visible查找显示的元素对属性进行过滤:
我们可以匹配包含某属性的元素, 包含某属性且对值进行匹配, 并且可以加多个条件;
[atr]包含某个属性, [atr=value]匹配有属性atr且值为val的元素;还有几个匹配方法,很类似正则表达式的匹配方式:
[atr!=value] 不等于 [atr^=val]属性值以val开头, [atr$=val]属性值以val结尾
[atr*=val]属性值包含val值;表单元素的匹配:
:text :radio :checkbox等等….
:enable, :disabled, :checked(radio, checkbox选中), :selected;(select选中)
- 元素属性的操作
可以获取一个属性值attr(name), 设置一个属性值attr(key, value), 设置一组属性值:attr(properties);
css类:
addClass(class)添加css, removeClass移除css - 文本,值,html代码的获取
文本和html代码没什么可说的,值的获取要说下
.val()可以获取select的选择的值,如果是多选则返回一个数组;
val(array)可以为check,select,radio赋值, 设置选择项,传递一个数组 - 方法:
数组的过滤: $.grep(array, callback),
$.grep([0,1,2], function(n, i){return n > 0});很好哦dom数组对象转换为jquery数组:
$.makeArray($(“div”));jquery数组转换为dom数组:
$.toArray();确定在数组中的位置:
$.inArray(value, array); 确定value在array中的位置;$.unique(array)去除数组中重复的元素;
$.map(array, callback);把数组array转换为另一个数组
$.map([0,1,2], function(n){return n + 4}); - 字符串操作:
$.trim(str)去除前后的字符串
转载于:https://www.cnblogs.com/lyroge/archive/2010/08/13/1799034.html
Jquery1.4.1 学习相关推荐
- [转]jQuery-1.3.2学习笔记
本文转自:http://panqunjun.blogcn.com/diary,25034389.shtml 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人 ...
- jQuery1.3.2 源码学习 -1 $ 是什么?jQuery 又是什么?
jQuery1.3.2 源码学习 本源码使用当前的 jQuery 1.3.2 版本,下载时间 2009-4-25,下载网站:jquery.com. 一个函数 1 /*! 2 * jQuery Ja ...
- jquery1.9学习笔记 之选择器(基本元素五)
多种元素选择器 jQuery("selector1,selector2,selectorN") 例子: <!doctype html> <html lang=' ...
- jquery1.9学习笔记 之选择器(基本元素四)
ID选择器("#id") 描述: 选择与给出ID属性匹配的单元标签. 对于ID选择器,jquery使用JS的函数document.getElementById(),当一个标签附加到 ...
- JQUERY1.9学习笔记 之内容过滤器(三) has选择器
描述:选择至少包含一个元素,匹配指定的标签的标签. jQuery( ":has(selector)" ) 例:给所有的div添加一个类"test",在他们中有一 ...
- jQuery1.3.2 源码学习 -2 两个重要的正则表达式
32 // Is it a simple selector 33 isSimple = /^.[^:#\[\.,]*$/ / / 表示这是正则表达式 ^ 表示开始部分 $ 表示结束部分 . 匹配除了 ...
- jQuery1.9(动画效果)学习之——.fadeTo( duration, opacity [, complete ] )
描述: 调整匹配元素的透明度. .fadeTo( duration, opacity [, complete ] ) duration 类型: String,Number 一个字符串或者数字决定动画将 ...
- jQuery学习(一)
因为项目需要,同时也因为兴趣,在近一段时间研究和使用了jQuery,它真的是太强大了,代码非常的优雅和简洁,好后悔现在才开始了解它,虽然目前网络上关于jQuery的资料.学习心得,教程多得你看不完,但 ...
- jQuery Mobile的学习时间bottonbutton的事件学习
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/27700521 程序猿都非常懒,你懂的! ...
- 【转】Angular学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
最新文章
- 什么是AngularJS?它有哪些特性?
- php能做的事,PHP也能干大事 随机函数
- postgresql立式版本下载_PostgreSQL 12.0 正式版本发布
- 手撕设计模式之「单例模式」(详细解析)
- 带你搞明白什么是缓存穿透、缓存击穿、缓存雪崩
- live555 源码分析: SETUP 的处理
- 音视频技术开发周刊 | 217
- Android 内存泄漏总结文档
- LeetCode-二叉树算法总结-层次遍历,路径总和等
- Bulk API实现批量操作
- 【转载】浅析输入法原理
- linux io函数,unix/Linux低级IO函数的用法有哪些? 爱问知识人
- ffmpeg推流和拉流rtsp
- 【路由设置】Macbook 双网卡同时访问内外网
- [Python] 网络设备巡检脚本
- 笔记本合上盖子不能从睡眠中唤醒解决办法
- python牛顿迭代法求根例题_python求根算法
- 计算机网络nc是什么意思啊,请问nc是什么?
- Linux进入中国,12年的风和雨
- 2011年RSA中国大会报名注册正式启动
热门文章
- 网站建设中HTML编写技巧你必须掌握的30个 提升你的编写能力|网站建设
- centos 6.5 httpd 服务
- java中加号和append,请详细说一下java中append()的方法.
- mysql可以复用删除的记录吗_MySQL学习(八)删除表数据
- angular自带的一些api_Angular2.0正式版api使用漫谈
- 学完Linux之后学什么语言,学习C语言一段时间后我们能做什么?
- Nginx源码分析 - Event事件篇 - Nginx的Event事件模块概览(17)
- 设计模式--建造者模式(C++实现)
- Android开机设置自启动
- SprinMVC解决URL多个参数