【JavaScript】JQuery与你相见恨晚

简介: jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,核心理念是write less,do more(写得更少,做得更多)。

简介


   jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,核心理念是write less,do more(写得更少,做得更多)。

特点:

   1、动态特效

   2、ajax同步异步

   3、通过插件扩展

   4、方便的工具

   5、渐进增强

   6、链式调用

   7、多浏览器支持


基本用法


20160110235359782.png


 一、语法


   $(selector).action()

   $为定义JQuery,选择符(selector)“查询”和“查找”HTML元素,action()执行对元素的操作


 二、选择器


   1.$("p.name")选取所有class="name"的<p>元素

   2.$("p#card)选取所有id="card"的<p>元素

   3.$("[href]")选取所有带href属性的元素

   4.$("[href]="#")选取所有href值等于"#"的元素,当然还可以是不等于

   5.$("[href$='.js']")选取所有href值以".js"结尾的元素


 三、事件


   $("button").click(funciton(){....})当按钮单击事件被触发调用一个函数


 四、效果


   1.hide() 和 show(),代表显示和隐藏

   2.fadeIn()淡出隐藏元素

     fadeOut()淡出可见元素

     fadeToggle()在前两个淡出方法之间进行切换

     fadeTo()允许渐变为给定的不透明

   3.slideDown()向下滑动元素

     slideUp()向上滑动元素

     slideToggle()上下之间相互切换的滑动

   4.$(selector).animate({params},speed,callback);

     params必须是css属性

     speed参数规定效果的长

     callback动画完成后执行的函数名

   5.$(selector).stop(stopAll,goToEnd);

     stopAll规定是否清楚动画队列、goToEnd规定是否完成当前动画

   6.$(selector).hide(speed,callback)  当动画100%完成之后,调用callback

   7.$("#p1").css("color","red").slideUp(200).slideDown(200);

     以上表示可以将动作连起来


 五、HTML


   1.text()设置或返回文本的内容

     html()设置或返回所有元素的内容

     val()设置或返回表单字段的值

   2.append()在被选元素结尾插入内容

     prepend()在被选元素开头插入内容

     after()在被选元素之后插入内容

     before()在被选元素之前插入内容

   3.remove()删除被选元素(以及子元素)

     empty()从被选元素中删除子元素

   4.addClass()向被选元素添加一个或多个类

     removeClass()从被选元素删除一个或多个类

     toggleClass()对被选元素进行添加删除的切换、css()设置或返回样式属性

   5.width()宽度

     height()高度

     innerWidth()宽度(包括内边框)

     outerheight()高度(包括内外边框)


 六、遍历


   1.parent()返回直接父元素

     parents()返回所有祖先元素

     parentsUntil()返回给定元素之间的所有祖先元素

   2.children()返回被选元素的所有直接子元素

     find()返回被选元素所有后代元素

   3.siblings()返回被选元素的所有同胞元素、next()、nextAll()、nextUntil()

      prev()返回被选元素的所有前面元素、prevAll()、preUntil()

   4.first()首字母、last()尾字母

     eq()返回被选元素带有指定索引号的元素

     filter()给定一个标准,不匹配的将被删除


 七、AJAX


   1.$(selector).load(URL,data,callback);

     URL规定加载的URL

     data规定与请求一同发发送的字符串键值对集合

     callback是load方法执行完成之后的函数名

   2.GET从指定的资源请求数据

     POST向指定的资源提交要处理的数据


  八、杂项


    当$与别的地方冲突的时候,调用noConflict()会释放$符号在JQuery中的控制


感受


   学习完JQuery安排的视频以及例子的任务之后,总感觉没有一个宏观的把控,于是就在网上搜了对应的资料,然后进行了这样的总结,总算是对于JQuery有了一个大概的了解了,其实它真的很强大,很方便,但是对于IT行业的我们还应该在会用JQuery封装的方法基础上,深入理解封装的这些方法的内部结构,加油了!

相关文章
|
4月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
44 1
|
21天前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
51 14
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
55 3
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
25 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
2月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
2月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
2月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
76 0
|
4月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
4月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
94 4