jqurey常用方法(jqurey设计思想)

jqurey过滤器:
$('div').has('p');//选择包含p元素的div元素
$('div').not('.myClass');//选择class不等于myClass的div元素
$('div').filter('.myClass');//选择class等于myClass的div元素
$().first() //被选中元素的首个元素
$().last()被选元素的最后一个元素

链式操作(用在DOM操作):
$().eq()索引从0开始被选元素中带有指定索引号的元素如: $('p').eq(2)//选择第三个p元素
.eq()方法可以提供索引方法(切换) 如:$('#div').find('div').eq($(this).index())
$('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代或: $('div').find('h3')//选择其中的h3元素
$('div').html('hellow');//将它的内容改变为hellow
.filter()筛选指定表达式的元素如:$('p').filter(':odd').css('background','blue');//下标为基数有 :o
.first()选择第一个元素如: $('p').first().css('background','blue');
.last()选择最后一个元素如: $('p').last().css('background','blue');
.is()检测是否元素返回布尔值如: $('p').click(function () {if($(this).is('.first')){$(this).css('background','red');}});//第一为true所以添加颜色值
.has()保留包含特定后代的元素,去掉那些不含有指定后代的元素 DOM操作用的多如: $('div').has('p');//选择包含p元素的div元素
.not()从匹配的元素集合中移除指定的元素(除什么之外) 如: $('p').not('.first').css('background','blue');
.slice()根据指定的下标范围,选取匹配的元素集合如:$('p').slice(0,5).css('background','blue'); 下标从0开始选择0到5添加颜色值
.end() //选项卡用的多使得结果集可以后退一步如:$('div').find('h3').eq(2).css('color','red').end().eq(4).css('color','blue');

相邻元素查找:
$('div').next('p'); //选择div元素后面的第一个元素p元素
$('div').parent(); //选择div元素的父元素
$('div').childrem(); //选择div的所有子元素

常用的遍历查找:

.find() 如: $('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代或: $('div').find('h3')//选择其中的h3元素

jqurey中创建div元素 var oDiv1 = $("<div></div>");直接创建或在$('ul').append('<li>hellow</li>');
jqurey创建class名 div1.addclass("contentDiv");

取值与赋值:
$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('hellow');//html()有参数hellow，表示对h1进行赋值

val()//表单字段的值
text()//所选元素的文本内容
attr()//用于获取属性值/设置、改变属性值改值提供回调函数有两个参数:1.当前元素下标 2.原始值(旧的值)
width()//设置属性宽度不包括内外边框边距
height()//设置属性高度不包括内外边框边距
outerWidth()//包括内外边框边距
outerHeight()//包括内外边框边距
取值是一组中第一个元素,赋值是所有的元素一个值为获取.() 两个值是设置 .('helow')

元素移形换位:
.直接移动该元素
$('div').insertAfter($('p')); //把div元素移动p元素后面
$('div').appendTo($('p'));

添加元素:
$('div').after($('div')); //把p元素加到div元素前面
.append()//元素的结尾插入内容
.prepend() //元素开头插入内容
.before()//元素之前插入内容
.replacewith()//元素替换为内容

jqurey选择器的优化:

1.优化使用id选择器 id选择器在DOM操作中是最快的

2.在class选择器前添加标签名

3.采用find()，而使用上下文查找如:$('.itm').find('li').css('color','red');

4.强大的链式操作比缓存更快

5.从左至右的模式1.3+版本更新

剪切:
$('div').appendTo($('p'));//div元素在p元素后面

赋值节点(克隆的意思):
$('div').clone().appendTo($('p'));//.clone()在元素之前赋值或者选择性赋值

工具方法:
.each()方法jQ对象下面使用 $.方法:工具方法; 原生的js也可以用操作数组可以用工具方法
.$trm($('div'),attr('class')) //方法可以把前后空格去掉

独立事件:
click() mouseover()等等

通用事件:
bind()绑定多个事件(可以是函数内的多个参数绑定事件) one()操作一次 unbind() e:event()对象 pageX(获取坐标)等
.toggle(function(){},function(){})//可以绑定多个函数可以做切换效果

运动特征:
常见效果 1、 .fadeIn() //淡入 .fadeOut() //淡出 .slideDown() //向下展开 .slideUp() //向上卷起
复杂效果 .animate()动画 stop()阻止//滑入运动事件前添加该属性不会出现bug

拖拽插件网: http://jquerui.com/demos/draggable/
版本号组件库: 1.8.22/jqurey-ui.min.js 用绝对定位写

比较好的插件库(国外):
http://workshop.rs/projects/coin-slider/

插件写法:
1.在写jqurey插件时要写成闭包的形式(布局函数)
2.以开头(function($))( 代码 )(JQurey);结尾
$.fn : 扩展插件方法

实例:
(function($){
$.fn.miaovTab = funtion(){ //$.fn.maiovTab这里的.maiovTab是插件的url地址
// This 对应的外部的<script>引用

var This = this; //因为作用的问题必须这么写才不发生冲突
$('This').find('input').click(function(){
$('This').find('input').attr('class','');
$('This').find('div').css('display','none');

$(this).attr('class','active');
$('This').find('div').eq($(this).index()).css('display','block');
});
};
})(jQuery);

<!--
工具函数:
$.trim(); //去掉空格

$.each()遍历数组
如:
<div id="box"></div> //html代码
var arr = ['张三','李四','王五','马龙'];//遍历数组形式也可以遍历对象
$.each(arr,function(index,value){
$('#box').html($('box').html() + (index +1)+ '.' + value + '<br/>');
});

jqurey常用方法(jqurey设计思想)相关推荐

借鉴--阮一峰博客之Jquery设计思想
jquery常用方法--阮一峰博客借鉴由于自身以前一直只是止步于看别人的博客,这是我的第一篇博客(感觉好高大上),这次博客我是借鉴于阮一峰网络日志关于Jquery设计思想的部分. 首先关于此篇博客我 ...
AI框架精要：设计思想
AI框架精要:设计思想本文主要介绍飞桨paddle平台的底层设计思想,可以帮助用户理解飞桨paddle框架的运作过程,以便于在实际业务需求中,更好的完成模型代码编写与调试及飞桨paddle框架的二次 ...
彻底理解OkHttp - OkHttp 源码解析及OkHttp的设计思想
OkHttp 现在统治了Android的网络请求领域,最常用的框架是:Retrofit+okhttp.OkHttp的实现原理和设计思想是必须要了解的,读懂和理解流行的框架也是程序员进阶的必经之路,代码 ...
Linus 谈 Git 的设计思想，顺带骂了一堆人（视频）
点击上方"方志朋",选择"设为星标" 做积极的人,而不是积极废今天是周末,但也别忘记学习哦~ 昨天在网络上看到一个视频,<Linux介绍git的特点和设 ...
「完结」总结12大CNN主流模型架构设计思想
http://blog.sina.com.cn/s/blog_cfa68e330102zocn.html 专栏<CNN模型解读>正式完结了,在这一个专栏中,我们给大家回顾了深度学习中的各类 ...
MapReduce原理与设计思想
转自:http://www.cnblogs.com/archimedes/p/mapreduce-principle.html 简单解释 MapReduce 算法一个有趣的例子你想数出一摞牌中有多 ...
len(x) 击败 x.len()，从内置函数看 Python 的设计思想
内置函数是 Python 的一大特色,用极简的语法实现很多常用的操作. 它们预先定义在内置命名空间中,开箱即用,所见即所得.Python 被公认是一种新手友好型的语言,这种说法能够成立,内置函数在其中 ...
【设计思想解读开源框架】java监听模式和观察者模式
深耕技术,啃下22个技术点互联网行业更新换代非常快,行业常态便是不断学习,因此这些主流技术你一个都不能落下! ①并发编程 Java并发编程是整个Java开发体系中最难以理解,但也是最重要的知识点之一 ...
【设计思想解读开源框架】java如何发送post请求
在这里分享一份 [mybatis从入门到精通] 的强力教程,定能够助你一臂之力. Mybatis基本介绍 ORM和MyBatis 对象/关系数据库映射(ORM) 基本映射方式流行的ORM框架简介目 ...

jqurey常用方法(jqurey设计思想)

jqurey常用方法(jqurey设计思想)相关推荐

最新文章

热门文章