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操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
随机推荐
- [转帖]Windows DHCPServer远程代码执行漏洞分析(CVE-2019-0626)
Windows DHCPServer远程代码执行漏洞分析(CVE-2019-0626) ADLab2019-03-15共23605人围观 ,发现 4 个不明物体安全报告漏洞 https://www.f ...
- C# Note7:MVVM模式之数据绑定
一.资源说明 (1)本文参考自: 一步步走进WPF的MVVM模式(二):数据绑定 WPF之数据绑定总结 二.正文 数据绑定 (Data Binding)是WPF最重要的特性之一,也是实现 MVVM( ...
- 2017年前小纪(有关http的一些缓存理论知识)
position的top和bottom的区别:前者基准点定在top,后者基准点定在bottom. for-in 遍历属性的顺序不确定 手机端,line-height对光标大小非常有影响 有些css3属 ...
- python爬虫之scrapy模拟登录
背景: 初来乍到的pythoner,刚开始的时候觉得所有的网站无非就是分析HTML.json数据,但是忽略了很多的一个问题,有很多的网站为了反爬虫,除了需要高可用代理IP地址池外,还需要登录.例如知乎 ...
- 使用kubeadm安装kubenetes
一.环境 关闭防火墙和selinux 禁用swap master节点安装 #1.配置源 cd /etc/yum.repos.d/wget https://mirrors.aliyun.com/dock ...
- RestTemplate proxy 设置方式
RestTemplate restTemplate = new RestTemplate(new SimpleClientHttpRequestFactory() {{ setProxy(new ja ...
- sql查询(转)
http://www.51testing.com/html/41/n-4421541.html 1 负向条件查询(例如:!=.not in.not exists)都是不能使用索引,少用 可以使用:se ...
- CSS 常见的8种选择器 和 文本溢出问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...
- 五、同一台MySQL服务器启动多个端口-为读写分离做准备
一.安装数据库 https://www.cnblogs.com/huiyi0521/p/10113280.html 二.使用 mysql 命令为 root 用户授权 mysql 远程连接服务 mysq ...
- Scss - 简单笔记
原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...