1. jquery选择器

1.基础选择器

和css中的选择器基本一致
$("div1,div2,div3")
$("ul li")     后代选择器
$("ul>li")    子代选择器

2.筛选选择器

:first    $('li:first')   获取第一个|i元素:last     $('li:last')    获取最后一个li元素:eq(index) $("li:eq(2)")
获取到的1i元素中，选择索引号为2的元素,索引号index从0开始。:odd      $("li:odd")   获取到的li元素中，选择索引号为奇数的元素:even      $("li:even")   获取到的li元素中，选择索引号为偶数的元素

parents(),查找祖先级元素

3.函数使用方法

$(this).show()             显示元素
$(this).hide()               隐藏元素var index=$(this).index();   //得到当前元素的索引号p="￥25.20"
p=p.substr(1)       //得到字符串p去除第一个字符后的字符串
p="25.20"(n*p).toFixed(2)    //保留两位小数mouseover       鼠标经过
mouseout        鼠标离开

4.排他思想

$("button").click (function() {// 当前的元素变化背景颜色$(this).css("background","pink");// 其余的兄弟去掉背景颜色 隐式迭代$(this).siblings("button").css("background","");
});链式操作
$(this).css("background","pink").siblings().css("background","")

2. jquery样式操作

1.css样式操作

改变css样式
$("div").css("background","pink")
$("ul li").css("color","red")对象的形式来写
$(this).css({color:"red",width:300,
})

2.类操作

1.添加类
$(this).addClass("current")2.删除类
$(this).removeClass("current")3.切换类
$(this).toggleClass("current")
如果有这个类，就删除，如果没有，就添加jquery类操作不影响原先的类名，只针对于指定的类进行操作

3. jquery效果

1.显示隐藏效果

一般不写参数
show([speed],[],[fn])
hide()
toggle()    切换，可以实现显示与隐藏

2.滑动

slideDown()      下滑动
slideUp()      上滑动
slideToggle()      切换滑动括号可以写进参数时间

1.事件切换

1.事件切换hover 就是鼠标经过和离开的复合写法
$(".nav>li" ).hover( function() {$(this) :children("u1" ) . slideDown(200);
}, function() {$(this) . children("u1"). slideUp(200);
});2.事件切换hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li"). hover(function() {$(this).children("u1").slideToggle();
});

2.停止动画队列

stop()     写在动画的前面，相当于结束上一次的动画
$(".nav>li"). hover(function() {$(this).children("u1").stop().slideToggle();
});只要有动画效果，前面就要加stop()

3.淡入淡出效果

淡入   fadeIn()
淡出   fadeOut()
切换   fadeToggle()
修改透明度   fadeTo(速度，透明度)

4.自定义animate

animate(params,[speed],[easing],[fn])
( 1 ) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采
取驼峰命名法borderLeft。其余参数都可以省略。
(2 ) speed :三种预定速度之一 的字符串("slow" , "normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
( 3 ) easing : (Optional)用来指定切换效果,默认是"swing” ,可用参数"linear"
(4) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。$("div").animate({left:500,top:200,width:300,opacity:.4
},500)

3.jQuery 属性操作

1.固有属性

<a> href
inout   checked
获取属性
$("a").prop("href")设置属性
$("a").prop("href","#")

2.自定义属性

attr()
获取    $("a").attr("index")
设置    $("a").attr("index",1)

复选框全选全不选案例

4. jquery内容文本值

1.普通元素内容

1.获取  $(this).html()
text()
2.设置   $(this).html("123")
text()表单中的value
$("input").val()
$("input").val("123")

5.jquery 元素操作

1.遍历元素

each方法遍历元素
语法1  对于对象
var arr = ["red",'green", "blue"];
$("div").each(function(i, domEle) {// 回调函数第 一个参数定是索引号可以自己指定索引号号 名称
// console . log(index);console .1og(i);
// 回调函数第二 个参数一定是dom元素对 象console . log(domEle);
// domEle. css("color"); dom对象没有css方法$(domEle).css("color", arr[i]);
})语法2  主要针对于数据，对象
$.each(arr,function(i, ele) {console.log(i);console.1og(ele);
})$.each({ name:"andy",age: 18
}, function(i, ele) {console.1og(i); //输出的是name age 属性名console.1og(ele); //输出的是andy 18 属性值
})

2.创建和删除操作

1.创建元素
var 1i = $("<1i>我是后来创建的1i</1i>");2.添加元素
// (1) 内部添加
$("u1").append(1i); 内部添加并且放到内容的最后面
$( "u1").prepend(1i); //内部添加并且放到内容的最前面
// (2)外部添加
var div = $("<div>我是后妈生的</div>");
$(".test").after(div);
$(".test" ).before(div);3.删除元素
$("u1").remove(); 可以删除匹配的元素   自杀
$("u1").empty(); //可以删除匹配的元素里面的子节点   孩子
$("u1").htm1(""); //可以删除匹配的元素里面的子节点    孩子

6.jquery事件

1.事件注册

click,mouseover, mouseout, blur,focus,change, keydown. keyup. resize. scroll等

2.事件处理

on绑定事件


$("div").on({mouseenter: function() { $(this).css("background", "skyblue" );},click: function() {$(this).css("background", "purple" );},mouseleave: function() {$(this).css("background", "blue"); }
});$(”div" ).on("mouseenter mouseleave",function() {$(this ).toggleClass(" current" );
})on事件委派
$("u1").on("click", "1i", function() {alert(11);// click 是绑定在ul身上的，但是触发的对象是ul里面的小li
}); on给未来动态创建的元素绑定事件
$("ol").on("click", "1i", function() {alert(11);
})
var 1i = $("<li>我是后来创建的</1i>");
$("o1").append(1i);

off解绑事件

事件解绑 off
$("p") .off() //解绑p元素所有事件处理程序
$("p") .off( "click") // 解绑p元素上面的点击事件后面的foo是侦听函数名
$("ul") .off ("click", "li"); // 解绑事件委托

one绑定事件

用法跟on一样，但只触发一次
$("u1").one("click", "1i", function() {alert(11);// click 是绑定在ul身上的，但是触发的对象是ul里面的小li
});

自动触发事件

// 1.元素. 事件()
$("div" ). click();会触发元素的默认行为2.元素. trigger("事件")
$("div").trigger("click" ) ;会触发元素的默认行为
$("input").trigger("focus");// 3.元素. triggerHandler("事件")就是不会触发元素的默认行为 类如input输入框的闪烁光标
$("div"). triggerHandler("click" );
$("input").on("focus", function() {$(this).val("你好吗");
});
// $("input").triggerHandler("focus");

3.事件对象

事件被触发，就有事件对象的产生

element.on(events,[selector],function(event){})

阻止默认行为: event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()

作者：hero_th
作品制作不易，请多多支持！~~~

jquery详细基础教程相关推荐

阮一峰：jQuery官方基础教程笔记
原文地址:http://www.jobbole.com/entry.php/1151 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQu ...
8个jQuery Mobile基础教程
来自phpchina:http://www.phpchina.com/archives/view-39863-1.html 1. jQuery Mobile入门介绍 2. jQuery Mobile基 ...
Python超详细基础教程,从入门到实践
Python超详细基础入门一.变量和简单数据类型 (一)修改字符串大小写 (二)制表符和换行符 (三)删除空白 (四)数二.列表 (一)列表定义 (二)修改.添加和删除元素 (三)组织列表三.操 ...
Docker超详细基础教程
一.Docker介绍 Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中, ...
python详细基础教程-Python基础教程，Python入门教程（非常详细）
Python 英文本意为"蟒蛇",直到 1989 年荷兰人 Guido van Rossum (简称 Guido)发明了一种面向对象的解释型编程语言(后续会介绍),并将其命名为 P ...
Redis灵魂百问（入门详细基础教程）
[redis是什么] redis是一个开源的.使用C语言编写的.支持网络交互的.可基于内存也可持久化的Key-Value数据库. redis的官网地址,是redis.io.(域名后缀io属于国家域名, ...
MySql超级详细基础教程
mysql.exe 客户端 mysql -h localhost -uroot -p 连接到mysqld.exe 数据库->表(行,列) 表(多行多列的) insert(增) 可以插入所有列,也 ...
阿里云短信验证服务详细基础教程
阿里云短信验证服务 1. 注册一个阿里云的帐号 2. 在搜索栏搜索短信服务 3. 点击免费开通 4.开通之后点击管理控制台 5. 获取AccessKey 6. 创建AccessKey并保存,后面会用到 ...
近万字Vue详细基础教程
目录 1.1.概念(基于vue2) 1.2.vue/cli脚手架 1.2.1 创建项目启动服务 1.2.2 项目目录讲解(可略过) 1.2.3 自定义配置 1.2.4 eslint 1.2.5 单vu ...
Python超详细基础入门教程
Python超详细基础教程(一) 一.变量和简单数据类型 (一)修改字符串大小写 (二)制表符和换行符 (三)删除空白 (四)数二.列表 (一)列表定义 (二)修改.添加和删除元素 (三)组织列表 ...

jquery详细基础教程

1. jquery选择器

1.基础选择器

2.筛选选择器

3.函数使用方法

4.排他思想

2. jquery样式操作

1.css样式操作

2.类操作

3. jquery效果

1.显示隐藏效果

2.滑动

1.事件切换

2.停止动画队列

3.淡入淡出效果

4.自定义animate

3.jQuery 属性操作

1.固有属性

2.自定义属性

4. jquery内容文本值

1.普通元素内容

5.jquery 元素操作

1.遍历元素

2.创建和删除操作

6.jquery事件

1.事件注册

2.事件处理

on绑定事件

off解绑事件

one绑定事件

自动触发事件

3.事件对象

jquery详细基础教程相关推荐

最新文章

热门文章