jquery学习笔记

作者: LongTean | 来源:发表于2017-04-22 15:46 被阅读882次

前言

暑假的时候虽然说学习过一遍jQuery了，但只是眼过一遍，熟悉了基本的使用并没有做记录，趁着学校这两天学校运动会放假，决定整理一篇jQuery的笔记，方便以后复习,以上均通过w3school学习。

课程章结

jQuery介绍

关键词：简介、安装、语法、选择器、事件、名称冲突

简介：jQuery是一个JavaScript函数库,它的宗旨是“write less，do more”,也就是一个轻量级的"写的少，做的多"的JavaScript库。
安装：
- 下载jQuery到本地，从本地载入
- 引用CDN中加载jQuery
  - 使用以下代码可以加载CDN，使用引用CDN的方式有一个很大的优势就是许多用户在访问其他站点的时候已经加载过jQuery，结果就是当这些人访问站点时，会直接从缓存中加载jQuery，从而减少加载时间。而且，大多数CDN都可以确保用户在请求文件时，从最近的服务器上返回响应，从而提高加载速度；
```
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head> 
```
语法：
- jQuery的基本语法是$(selector).action()
  - 美元符号定义 jQuery
  - 选择符（selector）"查询"和"查找" HTML 元素
  - action()函数执行对元素的操作
- 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，$(document).ready(function(){});将jQuery函数写在这个函数中
选择器
- 常见的选择器有以下几种：
  - 元素选择器：$('p')
  - id选择器：$('#id')
  - .class选择器：$(".class")
  - $('p.test')表示选择类别名为test的p标签
  - $("a[target='_blank']")：表示选取所有target属性值为_blank的a标签
  - 更多可参考jquery选择器手册
事件
- jQuery事件处理方法是jQuery的核心函数，事件处理程序指的是当HTML中发生某些事件所调用的方法，也叫作“触发”；（通常把jQuery代码放在<head>部分的事件处理方法中；详细的事件参考jQuery事件手册
- 可以分为：鼠标事件（click），键盘事件(keypress)，表单事件(submit)，文档/窗口事件(load、scroll)等等
- 实例:
  - $(this).hide() - 隐藏当前元素
  - $("p").hide() - 隐藏所有段落
  - $("p .test").hide() - 隐藏所有 class="test" 的段落
  - $("#test").hide() - 隐藏所有 id="test" 的元素
  - $('p').click(function(){});-点击p元素执行函数
名称冲突
- 由于其他库也可能使用$符号，那么就会引起冲突，jQuery中使用noConflict()方法来解决这个问题
- 注意事项
  - 把所有的jQuery代码置于事件处理函数中；
  - 把所有事件处理函数置于文档就绪事件处理器中；
  - 把jQuery代码置于单独的.js文件中;
  - 如果存在名称冲突，则重命名jQuery库；

示例
<iframe height='265' scrolling='no' title='jQuery1' src='//codepen.io/longtean/embed/vmGQyj/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/longtean/pen/vmGQyj/'>jQuery1</a> by LongTean (<a href='http://codepen.io/longtean'>@longtean</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

jquery效果

关键词：隐藏显示、淡入淡出、滑动、动画、stop()、callback方法、chaining

显示隐藏
- show(),hide(),比如隐藏的使用语法为：$('selector').hide(speed,callback),其中speed为速度，callback为完成隐藏动作后执行的函数，另外，toggle()可以显示和隐藏
淡入淡出
- 有fadeIn(),fadeToggle(),fadeTo(),使用语法同上，fadeTo(speed,opacity,callback)可以改变透明度。
滑动
- slideDown(),slideToggle(speed，callback)
动画
- animate()方法,使用语法为$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性,可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒,可选的 callback 参数是动画完成后所执行的函数名称。
  - 例:点击按钮，将div元素向右移动250px的同时，将透明度变为0.5且高度变为150px宽边为150px
```
$("button").click(function(){
$("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
    });
});  
```
  - 需要注意的是css属性名必须像这么写：marginLeft。。。骆驼命名法吧
stop()
- 用来在动画或效果完成前对他们停止，使用语法$(selector).stop(stopAll,goToEnd);,其中可选参数stopAll规定是否应该清除动画队列，默认是false，即仅停止活动的动画，但允许队列中的其他动画执行；可选参数goToEnd表示是否立即完成当前动画，默认为false；
callback()
- 此函数在当前动画100%完成之后执行；因为JS语句是逐一执行的，为了避免因为动画还没执行完成而造成动画与之后的语句之间可能产生的错误或者页面冲突，建议以参数的形式添加Callback函数；
chaining
- Chaining允许我们在一条语句中添加多个方法，例如$('p').css('color', 'red').slideUp(2000).slideDown(2000);，这是p元素就会先改变css样式，然后收缩，最后张开；
  示例
  <iframe height='265' scrolling='no' title='jQuery2' src='//codepen.io/longtean/embed/BRKbQv/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/longtean/pen/BRKbQv/'>jQuery2</a> by LongTean (<a href='http://codepen.io/longtean'>@longtean</a>) on <a href='http://codepen.io'>CodePen</a>.
  </iframe>

jquery HTML

关键词：捕获、设置、添加、删除、css类、css()、尺寸

捕获
- 操作DOM的常用方法
  - text() - 设置或返回所选元素的文本内容
  - html() - 设置或返回所选元素的内容（包括 HTML 标记）
  - val() - 设置或返回表单字段的值
- 获取属性的方法
  - attr()- 用于获取属性值
设置
- 设置内容也是用上一节提到的三个函数，不过需要在括号中加入需要设置的内容；
- 同时需要知道，这三个jQuery方法都拥有回调函数，函数有两个参数，分别为被选元素列表中当前元素的下标以及原始值，text()、html() 以及 val() 的回调函数；
- 利用attr()来设置属性时可以同时设置多个属性，属性之间利用逗号隔开，此方法同样具有回调函数；
添加元素
- 利用jQuery可以很容易的添加新元素，具体有如下四个方法
  - append()- 在被选元素的结尾插入内容或元素
  - prepend()-在被选元素的开头插入内容或元素；
  - after()-在被选元素之后插入内容或元素；
  - before()-在被选元素之前插入内容或元素；
  - append()和prepend()方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML，或者通过 JavaScript 代码和 DOM 元素。
  注意：append()在一个元素的尾部添加内容，不添加新节点，而after是在被选元素之后添加内容，添加了新节点。
删除
- 删除元素和添加元素类似，有以下几个方法
  - remove() -删除被选元素及其子元素，括号中可添加选择器，用于删除符合选择器条件的元素及其子元素；
  - empty()-从被选元素中删除子元素；
css类
- 利用jQuery可以很容易的操作css元素，主要方法有
  - addClass()-向被选元素添加一个或多个类（添加多个类的时候类名称之间用空格隔开）；
  - removeClass()-从被选元素删除一个或多个类；
  - toggle()-对被选元素添加/删除类的切换操作；
css()
- 设置或返回被选元素的一个或多个样式属性，语法为css('propertyName')如果有多个满足被选条件，则只返回第一个元素的属性；
- 如需设置CSS属性，则需使用语法为css('propertyName', 'value')，此时将所有满足条件的元素的样式都设置成目标样式；
尺寸
- 通过jQuery很容易处理元素和浏览器窗口的尺寸，主要的方法如下：
  - width()-设置或返回元素的宽度（不包括内边距、边框和外边距），如果对象为document或者window，则表示返回HTML文档或者浏览器窗口的宽度和高度；如果在括号中加入数字，则表示将对应的尺寸设置为对应的值；
  - height()-设置或返回元素的高度（不包括内边距、边框和外边距）；
  - innerWidth()-返回元素的宽度（包括内边距）；
  - innerHeight()-返回元素的高度（包括内边距）；
  - outerWidth()-返回元素的宽度（包括内边距和边框），如果括号中增加参数‘true’则表示返回包括内外边距及边框的宽度；
  - outerHeight()-返回元素的高度（包括内边距和边框），如果括号中增加参数‘true’则表示返回包括内外边距及边框的高度；

示例
<iframe height='265' scrolling='no' title='jQuery3' src='//codepen.io/longtean/embed/wdWgBE/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/longtean/pen/wdWgBE/'>jQuery3</a> by LongTean (<a href='http://codepen.io/longtean'>@longtean</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>

jQuery遍历

关键词：遍历、祖先、后代、同胞、过滤

遍历
- 遍历用于根据其相对于其他元素的关系来查找或者选取HTML元素；
- DOM遍历：遍历方法中最大的种类是树遍历tree-traversal
祖先
- 祖先元素包括父元素、祖父元素等等，常用的方法为：
  - parent()-返回被选元素的直接父元素；
  - parents()-返回被选元素的所有祖先元素，其中甚至包括文档的根元素；
  - parentsUntil()-返回介于两个给定元素之间的祖先元素；
后代
- 与祖先相对的，后代指的是子、孙、曾孙等，常用的方法为：
  - children()-返回被选元素的直接子元素；
  - find()-返回被选元素的被find的元素，包括所有后代；
同胞
- 同胞拥有相同的父元素，常用的方法为：
  - siblings()：返回所有被选元素的同胞元素；
  - next()：返回被选元素的下一个同胞元素；
  - nextAll()：返回被选元素的所有跟随的同胞元素；
  - nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素；
  - prev()：返回被选元素的上一个同胞元素；
  - prevAll():返回被选元素的所有前面的同胞元素；
  - prevUntil()：返回介于两个给定参数之间的所有的同胞元素；
过滤
- 缩小搜索元素的范围，常用的方位有以下几种：
  - first()：返回被选元素的首个子元素；
  - last()：返回被选元素的最后一个元素；
  - eq()：返回被选元素中带有指定索引号的元素；
  - filter()：返回符合匹配标准的元素集合；
  - not()：返回不匹配标准的所有元素集合；

jquery Ajax

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。这一章我准备写一篇专门的博客来介绍，附上教程ajax教程.

总结

写了这么多，不仅是一种分享，希望更多地人看到，能对他们有所帮助，也是自己的一种总结，写在笔记本上的笔记会只属于自己，而写在这里的笔记，属于我们。
共勉

网友评论

6e2348a551a9:这些可以去runoob或者w3cschool看，不过自己记录一遍也对自己有好处，加油
北京大数据苏焕之:你有这微信吗？我也爱好写文章！能不能加个好友，没有别的意思就是平常交流交流！😁😁😁如果有冒犯请谅解！喜欢你的文章想认识你一下
LongTean:文中示例无法显示，可以去我的博客中看看：http://longtean.top
cduyzh:@LongTean 博客新开的吧还有很多地方可以完善哦可以来我这看看欢迎设为友链 http://www.cduyzh.com
2fb12fe3af87:楼主，有什么好的学习方法指点指点？
LongTean: @K丶ylin 你可以多看看大神的博客然后多总结多动手

jquery学习笔记

前言

课程章结

jQuery介绍

jquery效果

jquery HTML

jQuery遍历

jquery Ajax

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端之旅

编程技术

前端学习

前端开发

编程基础

WEB前端程序开发

我爱编程

Web前端之路