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. [转帖]Windows DHCPServer远程代码执行漏洞分析(CVE-2019-0626)

    Windows DHCPServer远程代码执行漏洞分析(CVE-2019-0626) ADLab2019-03-15共23605人围观 ,发现 4 个不明物体安全报告漏洞 https://www.f ...

  2. C# Note7:MVVM模式之数据绑定

    一.资源说明 (1)本文参考自: 一步步走进WPF的MVVM模式(二):数据绑定 WPF之数据绑定总结 二.正文  数据绑定 (Data Binding)是WPF最重要的特性之一,也是实现 MVVM( ...

  3. 2017年前小纪(有关http的一些缓存理论知识)

    position的top和bottom的区别:前者基准点定在top,后者基准点定在bottom. for-in 遍历属性的顺序不确定 手机端,line-height对光标大小非常有影响 有些css3属 ...

  4. python爬虫之scrapy模拟登录

    背景: 初来乍到的pythoner,刚开始的时候觉得所有的网站无非就是分析HTML.json数据,但是忽略了很多的一个问题,有很多的网站为了反爬虫,除了需要高可用代理IP地址池外,还需要登录.例如知乎 ...

  5. 使用kubeadm安装kubenetes

    一.环境 关闭防火墙和selinux 禁用swap master节点安装 #1.配置源 cd /etc/yum.repos.d/wget https://mirrors.aliyun.com/dock ...

  6. RestTemplate proxy 设置方式

    RestTemplate restTemplate = new RestTemplate(new SimpleClientHttpRequestFactory() {{ setProxy(new ja ...

  7. sql查询(转)

    http://www.51testing.com/html/41/n-4421541.html 1 负向条件查询(例如:!=.not in.not exists)都是不能使用索引,少用 可以使用:se ...

  8. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

  9. 五、同一台MySQL服务器启动多个端口-为读写分离做准备

    一.安装数据库 https://www.cnblogs.com/huiyi0521/p/10113280.html 二.使用 mysql 命令为 root 用户授权 mysql 远程连接服务 mysq ...

  10. Scss - 简单笔记

    原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档. 一.变量 变量的引入是 scss 的一个核心特性,变量 ...