搜索
房产
装修
汽车
婚嫁
健康
理财
旅游
美食
跳蚤
二手房
租房
招聘
二手车
教育
茶座
我要买房
买东西
装修家居
交友
职场
生活
网购
亲子
情感
龙城车友
找美食
谈婚论嫁
美女
兴趣
八卦
宠物
手机

jQuery初学者笔记 一

[复制链接]
查看: 73|回复: 0

1万

主题

1万

帖子

4万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
45261
发表于 2020-2-14 21:00 | 显示全部楼层 |阅读模式
jQuery初学者笔记 一

Mirror王宇阳 by
jQuery语法

jQuery语法是经过拔取HTML元素,并对拔取的元素举行操纵
底子语法:

全数jQuery语句用“$”标记起头
  1.                                     点击消失
  2.         点击消失
  3.                     
复制代码
jQuery函数位于一个document ready函数中,我们必要在js中加载该函数文档
  1. // jQuery进口函数$(document).ready(function(){    //jQuery代码});/*******************************/$(function(){    //jQuery代码});
复制代码
挑选器语法:

jQuery的挑选器语法格式和CSS的挪用方式一样的哦!
挑选器答应基于元素的id、class、type、属性、属性值等挑选方式来到指定的HTML元素

  • 元素挑选器
    1. $("p"); //拔取p标签元素
    复制代码
  • id挑选器
    1. $("#demo"); // 拔取id='demo'的元素
    复制代码
  • .class挑选器
    1. $(".demo"); // 拔取class='demo'的元素
    复制代码
  • 全数元素
    1. $("*"); // 拔取全数元素
    复制代码
jQuery事变:

|Event 函数 |绑定函数至 |
|$(document).ready(function) |将函数绑定到文档的停当事变(当文档完成加载时) |
|$(selector).click(function) |触发或将函数绑定到被选元素的点击事变 |
|$(selector).dblclick(function) |触发或将函数绑定到被选元素的双击事变 |
|$(selector).focus(function) |触发或将函数绑定到被选元素的获得焦点事变 |
|$(selector).mouseover(function)|触发或将函数绑定到被选元素的鼠标悬停事变 |
事变语法:

参考:
|方式 |描摹 |
|bind() |向婚配元素附加一个或更多事变处置惩罚器 |
|blur() |触发、或将函数绑定到指定元素的 blur 事变 |
|change() |触发、或将函数绑定到指定元素的 change 事变 |
|click() |触发、或将函数绑定到指定元素的 click 事变 |
|dblclick() |触发、或将函数绑定到指定元素的 double click 事变 |
|delegate() |向婚配元素确当前或未来的子元素附加一个或多个事变处置惩罚器 |
|die() |移除全数经过 live() 函数增加的事变处置惩罚步伐。 |
|error() |触发、或将函数绑定到指定元素的 error 事变 |
|event.isDefaultPrevented() |返回 event 工具上能否挪用了 event.preventDefault()。 |
|event.pageX |相对于文档左侧沿的鼠标位置。 |
|event.pageY |相对于文档上边沿的鼠标位置。 |
|event.preventDefault() |禁止事变的默许行动。 |
|event.result |包含由被指定事变触发的事变处置惩罚器返回的末端一个值。 |
|event.target |触发该事变的 DOM 元素。 |
|event.timeStamp |该属性返回从 1970 年 1 月 1 日到事变发生时的毫秒数。 |
|event.type |描摹事变的典范。 |
|event.which |指示按了哪个键或按钮。 |
|focus() |触发、或将函数绑定到指定元素的 focus 事变 |
|keydown() |触发、或将函数绑定到指定元素的 key down 事变 |
|keypress() |触发、或将函数绑定到指定元素的 key press 事变 |
|keyup() |触发、或将函数绑定到指定元素的 key up 事变 |
|live() |为当前或未来的婚配元素增加一个或多个事变处置惩罚器 |
|load() |触发、或将函数绑定到指定元素的 load 事变 |
|mousedown() |触发、或将函数绑定到指定元素的 mouse down 事变 |
|mouseenter() |触发、或将函数绑定到指定元素的 mouse enter 事变 |
|mouseleave() |触发、或将函数绑定到指定元素的 mouse leave 事变 |
|mousemove() |触发、或将函数绑定到指定元素的 mouse move 事变 |
|mouseout() |触发、或将函数绑定到指定元素的 mouse out 事变 |
|mouseover() |触发、或将函数绑定到指定元素的 mouse over 事变 |
|mouseup() |触发、或将函数绑定到指定元素的 mouse up 事变 |
|one() |向婚配元素增加事变处置惩罚器。每个元素只能触发一次该处置惩罚器。 |
|ready() |文档停当事变(当 HTML 文档停当可用时) |
|resize() |触发、或将函数绑定到指定元素的 resize 事变 |
|scroll() |触发、或将函数绑定到指定元素的 scroll 事变 |
|select() |触发、或将函数绑定到指定元素的 select 事变 |
|submit() |触发、或将函数绑定到指定元素的 submit 事变 |
|toggle() |绑定两个或多个事变处置惩罚器函数,当发生轮流的 click 事变时实行。 |
|trigger() |全数婚配元素的指定事变 |
|triggerHandler() |第一个被婚配元素的指定事变 |
|unbind() |从婚配元素移除一个被增加的事变处置惩罚器 |
|undelegate() |从婚配元素移除一个被增加的事变处置惩罚器,现在或未来 |
|unload() |触发、或将函数绑定到指定元素的 unload 事变 |
过滤挑选器

底子标签条理过滤器


  • :first/:last
    :first:拔取第一个元素
    :last:拔取末端一个元素
  • :not(*):去除挑选器给定的元素
  • :even/:odd
    :even:偶数索引的标签
    :odd:奇数索引的标签
  • :eq()/:gt()/:lt()
    eq():拔取指定索引的元素
    ge():拔取大于指定索引的元素
    lt():拔取小于指定索引的元素
  • :focus 拔取全数落空焦点的元素
  • :header 拔取全数题目元素(h1\h2\h3……)
  • :animated 婚配全数正在履行动画操纵的元素
  • 实例:
  1. $(document).ready(function(){                $("div:lt(4)").addClass("myClass");// 除末端三个元素之外增加myClass                $("div:not(.green,.gray)").addClass("myClass"); //除了green和gay之外的元素增加myClass                $("div:gt(3)").addClass("myClass");//给末端三个元素增加myClass                $("div:even").addClass("myClass");//偶数索引增加myClass                $("div:odd").addClass("myClass");// 奇数索引增加没有Class                $("div:eq(3)").addClass("myClass");//给指定索引增加myClass                $("div:first").addClass("myClass");//第一个标签                $("div:last").addClass("myClass");//末端一个标签            });
复制代码
内容过滤挑选器


  • :contains(text) 拔取包含text文本内容的元素;区分巨细写
  • :empty 拔取不含子元素大要文本节点的空元素
  • :has(selector) 拔取含有挑选器所婚配的元素的元素
  • :parent 拔取含有子元素或文本节点的元素
属性过滤挑选器


  • [attribute] 拔取具有此属性的元素
  • [attribute = value] 拔取此属性值为value的全数元素
  • [attribute != value] 拔取此属性值不为value的全数元素
  • [attribute ^= value] 拔取此属性值为value起头的全数元素
  • [attribute $= value] 拔取此属性值为value竣事的全数元素
  • [attribute *= value] 拔取属性值包含value的全数元素
表单过滤挑选器

表单属性过滤挑选器

jQuery结果

隐藏和表现 (hide/show)
  1.                     hide()/show()                                                                    演示块            
  2.         
  3.                     
复制代码
toggle():开关
  1. $("#toggle").click(function(){    // toggle开关    $("#a1").toggle();});
复制代码
淡入淡出

fadeIn():淡入已隐藏的元素


  • 语法
  1. $().fadeIn(speed,callback);
复制代码
fadeOut():淡出可见的元素


  • 语法
  1. $().fadeOut(speed,callback);
复制代码
fadeToggle():淡入/出 已隐藏的/可见的元素


  • 语法
  1. $().fadeToggle(speed,callback);
复制代码
fadeTo():答应突变成给定的不通明度(值介于 0 与 1 之间)


  • 语法 :该方式严酷的说只是将本来100%通明的隐藏给设备了不通明度来操纵
  1. $().fadeTo(speed,opacity,callback);
复制代码
实例
  1.                     fadeIn()|fadeOut()|fadeToggle()|fadeTo()                                                                                    
  2.                           
  3.                             已隐藏            
  4.         
  5.             
复制代码
滑动

slideDown():向下滑动元素


  • 语法
  1. $().slideDown(speed,callback);
复制代码
slideUp():向上滑动元素


  • 语法
  1. $().slideUp(speed,callback);
复制代码
slideToggle():上/下 切换滑动元素
  1. $().slideToggle(speed,callback);
复制代码
实例
  1.                     slideDown()|slideUp()|slideToggle()                            *{margin: 0px;padding: 0px;}            #Down,#Up,#Toggle{                width: 60px;                height: 20px;                color: #000000;                font-size: 10px;                text-align: center;                float: left;                cursor: pointer;            }            #Down{background-color: #5555FF;}            #Toggle{background-color: #FCFF9F;}            #Up{background-color: #66FF66;}            #slide{                clear: both;                background-color: #CCCCCC;                width: 180px;                height: 100px;                border-top: #FF0000;                text-align: center;                position: relative;            }            #demo{margin: 10px 0px 0px 10px;}                                    向下滑动
  2.             滑动切换
  3.             向上滑动
  4.                         
  5.         
  6.             
复制代码
动画

animate():建立自界说动画


  • 语法
  1. $().animate({css},speed,callback);
复制代码
实例
  1.                     animate()动画                            #demo{                margin: 10px;                width: 100px;                height: 100px;                background-color: #5555FF;                position: relative;            }                                            
  2.             
复制代码

  • 制止动画或结果:

    • 语法

  1. $().stop(stopAll,goToEnd);
复制代码
Callback()


  • 当前动画 100% 完成以后实行
jQuery DOM

获得/设备内容


  • text() 设备/返回所选元素的文本内容[原型:innerhtml]
  • html() 设备/返回所选元素的内容(含HTML标签)
  • val() 设备/樊湖表单字段的value
获得/设备属性


  • attr() 设备/返回所选元素的属性内容(支持多个属性设备,返回数组)
增加元素


  • append() 尾部插入元素
  • prepend() 开首插入元素
  • after() 被选元素后插入元素
  • before() 被选元素前插入元素
删除元素


  • remove() 删除被选元素和子元素

    • 担任一个参数,过滤被删除的元素(即指定删除)
    • removeClass() 删除元素的class加载

  • empty() 删除被选元素的子元素
jQuery CSS 获得/设备


  • addClass() 向被选元素增加一个或多个Class类
  • removerClass() 从被选元素中删除指定的一个或多个Class类
  • toggleClass() 对被选元素的add/remove举行切换式的操纵
  • css() 设备/获得被选元素的Class属性

    • css("classname","value") 单个
    • css("classname":"value",……) 多个

jQuery 尺寸设备

jQuery初学者笔记 一  热点新闻 img_jquerydim


  • width()/height() 设备/返回元素的宽度/高度(content;不包含内边距、边框、外边距)
  • innerWidth()/innerHeight() 设备/返回元素的宽度/高度(Content+Padding;不包含边框、外边距)
  • outerWidth()/outerHeight() 设备/返回元素的宽度/高度(Content+Padding+Border;不包含外边距)
jQuery 遍历

向上遍历DOM树


  • parent() 返回自己的间接父类元素
  • parents() 返回自己的全数直系类元素(直至根元素)
  • parentsUntil() 返回两种间接的全数直系类元素(不包含)
  1. // parents(*)/parentsUntil(*):两个方式在这里都可选一个参数吸收
复制代码
向下遍历DOM树


  • children() 返回被选元素的全数间接子元素(支持过滤参数)
  • find() 返回被选元素的后代元素(支持过滤参数,指定标签、类名、id、name等)
水平遍历DOM树


  • siblings() 返回被选元素的全数同级元素(支持过滤参数)
  • next() 返回被选元素的下一个同级元素
  • nextAll() 返回被选元素以后的全数同级元素
  • nextUntil() 返回被选元素与参数之间的全数同级元素
  • prev() 返回被选元素的上一个同级元素
  • prevAll() 返回被选元素之前的全数同级元素
  • prevUntil() 返回被选元素与参数之间的全数同级元素
遍历 过滤


  • first() 返回被选元素的首个子元素
  • last() 返回被选元素的末端子元素
  • eq() 返回被选元素中带有指定索引的元素(可选参数,指定索引)
  • filter()返回可婚配的全数元素
  • not() 返回不婚配的全数元素
jQuery AJAX

AJAX

AJAX load()


  • load() 从办事器加载数据,并返回数据
经常操纵:挪用一个反复的代码块,例如网页的导航、版本块等……
由此可以大大的淘汰代码量的编写工作,模块化的团队开辟应当常用


  • 语法
  1. $().load(URL,data,callback);
复制代码
AJAX GET()


  • $.get() 从指定的资本请求数据
  • 语法
  1. $.get(URL , callback);
复制代码

  • 实例
  1. $("button").click(function(){  $.get("demo_test.php",function(data,status){    alert("数据: " + data + "\n状态: " + status);  });});
复制代码
AJAX POST()


  • $.post() 操纵 POST 请求向办事器提交数据

免责声明:假如加害了您的权益,请联系站长,我们会实时删除侵权内容,感谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Copyright © 2006-2014 全椒百姓网-全椒知名**,发布及时新鲜的全椒新闻资讯 生活信息 版权所有 法律顾问:高律师 客服电话:0791-88289918
技术支持:迪恩网络科技公司  Powered by Discuz! X3.2
快速回复 返回顶部 返回列表