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操作,动画的更多相关文章

  1. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  2. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  3. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  4. 第25篇 jQuer快速学习(上)---选择器和DOM操作

    这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...

  5. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  6. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  7. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  8. 锋利的jQuery ——jQuery中的DOM操作(三)

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  9. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  10. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

随机推荐

  1. ELK日志系统+x-pack安全验证

    根据之前已经搭好的ELK系统,现在加一个x-pack插件上去,不然谁拿到ip和端口都可以访问elasticsearch和kibana. 要的效果如下:打开kibana界面的时候要让其输入用户名密码才能 ...

  2. Puppet日常总结

    在工作中常常会有这样一种需求:某几个人需要某些测试服务器的root权限.比如,开发部门的张三,李四,王五,赵六需要rsync服务器的root权限.有些同学会说那直接 visudo在里面添加几个人不就行 ...

  3. 老男孩python学习自修【第二天】字符串用法

    实时处理增量日志最佳实践 主要使用f.seek()和f.tell()实现 字符串处理函数: s.find(substr, start, end) 查找子字符串,找不到则返回-1,找到则返回对应的索引 ...

  4. 关于 flask 实现数据库迁移以后 如何根据创建的模型类添加新的表?

    在此之前 我们先说一下常规的flask运用第三方扩展来实现数据库的迁移的三个步骤以及每步的目的. 数据库的迁移的三个步骤:(cd 到run.py所在路径) python run.py db init ...

  5. vue-cli:渲染过程理解2(vue init webpack方式创建)

    main.js: 入口文件 import Vue from 'vue' //引入node_modules中的vue import App from './App' //引入当前路径(src)下的App ...

  6. Express学习 ------模版引擎(handlebars)

    Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...

  7. Facebook开源最先进的语音系统wav2letter++

    最近,Facebook AI Research(FAIR)宣布了第一个全收敛语音识别工具包wav2letter++.该系统基于完全卷积方法进行语音识别,训练语音识别端到端神经网络的速度是其他框架的两倍 ...

  8. 【NLP】How to Generate Embeddings?

    How to represent words. 0 . Native represtation: one-hot vectors Demision: |all words| (too large an ...

  9. LVS负载均衡群集

    概述 群集的类型:无论是哪种服务器,都至少包括两台节点服务器,而对外表现为一个整体,只提供一个访问入口(域名或IP地址),相当于一台大型计算机.根据群集所针对的目标差异,可以分为以下三个类型: 1.负 ...

  10. 51Nod 1381 硬币游戏

    参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6445369.html 1381 硬币游戏 基准时间限制:1 秒 空间限制:131072 KB 分值 ...