JQuery选择器,事件,DOM操作,动画
JQuery是一个JavaScript代码库,或者是JavaScript框架;
1、选择器:(和CSS选择器一致)
基本选择器:ID选择器$('#div1');Class选择器('.div1');标签选择器('img');
并列选择器('用逗号隔开');后代选择器('用空格隔开');
2、过滤选择器:
first:$('.div1:first').click(function(){});
last:$('.div1:last').click(function(){});
eq(索引号):$('.div1:eq(0)').click(function(){});
not(选择器):$('.div1:not(#aa)').click(function(){}); //排除所有class为div1,id为aa的点击事件;
[属性名]:$('.div1[data-aaa]').click(function(){});//只有有[data-aaa]属性的div才有点击事件;
[属性名=值]:$('.div1[data-aaa==aaa]').click(function(){});
[属性名!=值]:$('.div1[data-aaa!=aaa]').click(function(){});
$('.div1:not(.div1[data-aaa])').click(function(){});//排除所有.div1属性名为[data-aaa]的点击事件;
contains(字符串):$('div1:contains(aa)').click(function(){});
has(选择器):$('.div1:has(#div)').click(function(){});//
3、事件:
JQuery事件:把JS事件的on去掉即可;
click:点击事件;dblclick:鼠标双击事件;mouseover:鼠标移入事件;mouseout鼠标移出事件;
foucs:元素获得焦点事件;blur:失去焦点事件;keydown:按键按下事件;keyup:按键抬起事件;
4、复合事件:
$('.div1').hover(function(){},function(){});//相当于monseover和movseout的组合;
5、事件冒泡:父级div包含子级div的时候,如果父级子级都有点击事件的话会他们两个的点击事件都会触发;
阻止事件冒泡:return false;
6、DOM操作:
属性操作:
获取属性:var a = $('.div').attr('属性名');
设置属性:var a = $('.div').attr('属性名','属性值');
删除属性:$('.div1').removeAttr('属性名');
样式操作:
获取样式:var a = $('.div').css('样式名');
设置样式:$('.div').css('样式名','值');//也可以修改样式
操作样式表的class:
添加class名:$('.div1').addClass('class名');
移除class名:$('.div1').removeClass('class名');
表单元素取值赋值:
取值:var a = $('.div1').val();
赋值:$('.div1').val('值');
非标单元素取值赋值:
取值:var a = $('.div1').html(); var a = $('.div1').text();
赋值:var a = $('.div1').html('值'); var a = $('.div1').text('值');
相关元素操作:
父级:parent();//他的父级;
parents('选择器');//他的父级们;
平级:prev();//他的上一级;
prevAll();//他的上级们;
next();//他的下级;
nextAll();//他的下级们;
添加:
内部添加:$('.div1').appen($('HTML字符串'));
下部平级添加:$('.div1').after($('HTML字符串'));
上部平级添加:$('.div1').before($('HTML字符串'));
移除:
清空内部所有元素:$('.div1').empty();
移除元素:$('.div1').remove('想要移除的元素');
7、动画
$('.div1').show();//相当于给class='div1';加了个display=block;
$('.div1').hide();//相当于给class='div1';加了个display=none;
$('.div1').slideUp();
$('.div1').slideDown();
$('.div1').fadeIn();
$('.div1').fadeOut();
//效果和sildedown,slideup一样,只不过是淡入淡出;
//slideUp(),slideDown()可以组成一套下拉菜单动画 $('.btn_1').click(function(){ if($('.div1').css('display')==none) { $('.div1').slideDown(); }else { $('.div1').slideUp(); } });
自定义动画:
animate({json类型的键值对},时间单位毫秒);
$('.div1').animate({width:'300',height:'300'},1000);
animate({......},....,function(){
回调函数;
在整个动画效果执行完毕之后执行;
});
$('.div1').animate({width:'300',height:'300'},1000,function(){
});
$('.div1').mouseover(function () {
$('.div2').stop().animate({width:'300'},500);
}).mouseout(function () {
$('.div2').stop().animate({width:'0'},500);
});
//每次动画执行之前都stop();防止动画叠加;
JQuery选择器,事件,DOM操作,动画的更多相关文章
- jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- 第25篇 jQuer快速学习(上)---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
随机推荐
- ELK日志系统+x-pack安全验证
根据之前已经搭好的ELK系统,现在加一个x-pack插件上去,不然谁拿到ip和端口都可以访问elasticsearch和kibana. 要的效果如下:打开kibana界面的时候要让其输入用户名密码才能 ...
- Puppet日常总结
在工作中常常会有这样一种需求:某几个人需要某些测试服务器的root权限.比如,开发部门的张三,李四,王五,赵六需要rsync服务器的root权限.有些同学会说那直接 visudo在里面添加几个人不就行 ...
- 老男孩python学习自修【第二天】字符串用法
实时处理增量日志最佳实践 主要使用f.seek()和f.tell()实现 字符串处理函数: s.find(substr, start, end) 查找子字符串,找不到则返回-1,找到则返回对应的索引 ...
- 关于 flask 实现数据库迁移以后 如何根据创建的模型类添加新的表?
在此之前 我们先说一下常规的flask运用第三方扩展来实现数据库的迁移的三个步骤以及每步的目的. 数据库的迁移的三个步骤:(cd 到run.py所在路径) python run.py db init ...
- vue-cli:渲染过程理解2(vue init webpack方式创建)
main.js: 入口文件 import Vue from 'vue' //引入node_modules中的vue import App from './App' //引入当前路径(src)下的App ...
- Express学习 ------模版引擎(handlebars)
Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...
- Facebook开源最先进的语音系统wav2letter++
最近,Facebook AI Research(FAIR)宣布了第一个全收敛语音识别工具包wav2letter++.该系统基于完全卷积方法进行语音识别,训练语音识别端到端神经网络的速度是其他框架的两倍 ...
- 【NLP】How to Generate Embeddings?
How to represent words. 0 . Native represtation: one-hot vectors Demision: |all words| (too large an ...
- LVS负载均衡群集
概述 群集的类型:无论是哪种服务器,都至少包括两台节点服务器,而对外表现为一个整体,只提供一个访问入口(域名或IP地址),相当于一台大型计算机.根据群集所针对的目标差异,可以分为以下三个类型: 1.负 ...
- 51Nod 1381 硬币游戏
参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6445369.html 1381 硬币游戏 基准时间限制:1 秒 空间限制:131072 KB 分值 ...