jQuery基础

编程语言 jikk345 273℃ 0评论
一、jQuery简介
jQuery库可以通过一行简单的标记被添加到网页中。
具备知识:
HTML
CSS
JavaScropt.
1、为什么使用jQuery?
jQuery是目前最流行的JS框架,提供大量的扩展。

二、jQuery安装
获取方式:
1、http://jquery.com/download/  下载,并自行放到代码的目录中<script src=指定jQuery路径> 
2、直接从CDN中载入,CDN有又拍云,新浪,谷歌,微软,中国区域不要使用google
注:下载的有两种,一种是mini版,他是压缩版,用于线上使用,另一种是未压缩版适全测试。
三、jQuery语法
可以选择HTML元素,并对他进行操作。
1、jQuery语法
jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。
基础语法
  1. $(selector).action()
$符号定义jQuery
选择符(selector) 查询和查找 HTML元素
jQuery的action()执行对元素的操作
实例
$(this).hide 隐藏当前元素
$(“p”).hide 隐藏当前p标签的元素
$(“p.test”).hide() 隐藏所有class = ‘test‘ 的p元素
$(‘#test’).hide() 隐藏所有id = ‘test’的元素
2、文档就绪事件
jQuery函数在一个document ready函数中
  1. $(document).ready(function(){
  2. //jQuery代码位置
  3. })
写这个的目的是为了防止在完全加载之前运行jQuery代码
如果在文档没有完全加载之前就运行函数,操作可能失败。
(1)试图隐藏一个不存在的元素
(2)获得未完全加载的图像的大小
提示:简洁写法(与上面的写的方法效果一样)
  1. $(function){
  2. //开始写jQuery代码
  3. }
三、jQuery选择器
选择器对HTML元素或单个元素进行操作
选择器基于元素的id,类,类型,属性,属性值等查找HTML元素。他基于已经存在的CSS选择器。
另,它还有一些自定义的选择器。
选择都是以$开头的。
1、元素选择器
jQuery元素选择器基于元素名选取元素。
在页面中选取所有<p>元素
  1. $('p')
实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>p元素都隐藏</title>
  6. </head>
  7. <body>
  8. <button>提交</button>
  9. <p>这是一个例子</p>
  10. <p>这是一个例子</p>
  11. <p>这是一个例子</p>
  12. <p>这是一个例子</p>
  13. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $("button").click(function(){
  17. $("p").hide()
  18. });
  19. });
  20. </script>
  21. </body>
  22. </html>
结果,点击提交p标签隐藏
2、ID选择器
#id 选择器通过HTML元素的id属性选取指定的元素。
页面中元素的id应该是唯一的,所以要在页面中选取唯一的元素需要通过#id选择器。
通过id选择元素语法实例如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>id 选择器</title>
  6. </head>
  7. <body>
  8. <h2>这是一个标签</h2>
  9. <p>哈哈哈</p>
  10. <p id="test">我因隐藏的管哥</p>
  11. <button>隐藏</button>
  12. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){
  16. $('#test').hide()
  17. }); //引号一定注意,不然有时间不生效
  18. });
  19. </script>
  20. </body>
  21. </html>
结果

 3、class选择器
类选择器可以通过指定的class查找元素。
例子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>class 选择器</title>
  6. </head>
  7. <body>
  8. <p>用户点击按钮后所有带有 class="test" 属性的元素都隐藏:</p>
  9. <p class="test">这是要隐藏的段落</p>
  10. <p class="test">这是要隐藏的段落</p>
  11. <button>隐藏</button>
  12. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  13. <script>
  14. $(document).ready(function(){
  15. $("button").click(function(){
  16. $('.test').hide()
  17. });
  18. });
  19. </script>
  20. </body>
  21. </html>
结果

 
语法 描述
$(“*”) 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的 <p> 元素
$(“p:first”) 选取第一个 <p> 元素
$(“ul li:first”) 选取第一个 <ul> 元素的第一个 <li> 元素
$(“ul li:first-child”) 选取每个 <ul> 元素的第一个 <li> 元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(“:button”) 选取所有 type=”button” 的 <input> 元素 和 <button> 元素
$(“tr:even”) 选取偶数位置的 <tr> 元素
$(“tr:odd”) 选取奇数位置的 <tr> 元素
4、独立文件中使用jQuery函数
如果网站包含多个页面,为了jQuey更容易维护,请把jQuery函数放到独立的js文件中
当使用时,会将函数直接添加到head部分,例如下例
  1. <head>
  2. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
  3. </script>
  4. <script src="my_jquery_functions.js"></script>
  5. </head>
四、jQuery事件
jQuery是为事件处理特别设计的。
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当HTML中发生某些事件所调用的方法。
实例:
在元素上移动鼠标
选取单选按扭
点击元素
在事件中经常使用术语,触发或激发。
例如:”当按下按健时触发keypress事件“
常见的DOM事件:
鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
1、jQuery事件方法语法
在jQuery中,大多数DOM事件都有一个等效的jQuery方法。
  1. $("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
  1. $("p").click(function(){
  2. // 动作触发后执行的代码!!
  3. });
2、常用的jQuery事件方法
$(document).ready()
$(document).ready() 方法在页面加载后执行的函数。
click()事件
click()方法是当按扭事件被触发时会调用一个函数。
在该函数点击html元素执行。
示例:点击某个<p>元素上触发时,隐藏当前p标签
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>4.this隐藏p标签</title>
  6. </head>
  7. <body>
  8. <p>点我消失1</p>
  9. <p>点我消失2</p>
  10. <p>点我消失3</p>
  11. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function(){
  14. $('p').click(function(){
  15. $(this).hide() //this就是dom对象中选
  16. });
  17. });
  18. </script>
  19. </body>
  20. </html>
结果

dbclick()事件
当双击元素时,会发生dblclick事件
dblclick()方法触发dbclick事件,或规定发生dblclick事件时运行的函数
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>dblclick()事件</title>
  6. </head>
  7. <body>
  8. <h2>当双击元素时,会发生 dblclick 事件。</h2>
  9. <h2>dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:</h2>
  10. <p>双击鼠标左键的,我就消失。</p>
  11. <p>双击我消失!</p>
  12. <p>双击我也消失!</p>
  13. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $('p').dblclick(function(){ //dblclick双击鼠标事件
  17. $(this).hide()
  18. });
  19. });
  20. </script>
  21. </body>
  22. </html>
结果
mouseenter()事件
当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>mouseenter()鼠标划过事件</title>
  6. </head>
  7. <body>
  8. <h2>当鼠标指针穿过元素时,会发生 mouseenter 事件。</h2>
  9. <h2>mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:</h2>
  10. <p id="test">鼠标指针进入此处,会看到弹窗。</p>
  11. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function(){
  14. $("#test").mouseenter(function(){
  15. alert("你的鼠标移动到id=p1 的元素上!") //alert弹出窗口标签
  16. });
  17. });
  18. </script>
  19. </body>
  20. </html>
mouseleave()事件
当鼠标指针离开元素时,会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>鼠标离开事件</title>
  6. </head>
  7. <body>
  8. <h2>当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。</h2>
  9. <h2>mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:</h2>
  10. <p id="test">离开我弹窗出来</p>
  11. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function(){
  14. $("#test").mouseleave(function(){
  15. alert("再见,您的鼠标离开了该段落。")
  16. });
  17. });
  18. </script>
  19. </body>
  20. </html>
结果
mousedown()事件
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>鼠标点击</title>
  6. </head>
  7. <body>
  8. <h2>当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。</h2>
  9. <h2>mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:</h2>
  10. <p id="test">点击我出弹窗啊</p>
  11. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function(){
  14. $('#test').mousedown(function(){
  15. alert("鼠标在该段落上按下!")
  16. });
  17. });
  18. </script>
  19. </body>
  20. </html>
结果
mouseup()事件
当在元素上松开鼠标按钮时,会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>松开鼠标按钮</title>
  6. </head>
  7. <body>
  8. <h2>当在元素上松开鼠标按钮时,会发生 mouseup 事件。</h2>
  9. <h2>mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:</h2>
  10. <p id="test">鼠标在段落上松开,就有弹窗</p>
  11. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function(){
  14. $("#test").mouseup(function(){
  15. alert("鼠标在段落上松开。")
  16. })
  17. })
  18. </script>
  19. </body>
  20. </html>
结果

hover()事件
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>hover()鼠标进入离开弹出窗口</title>
  6. </head>
  7. <body>
  8. <p>hover()方法用于模拟光标悬停事件。</p>
  9. <p>当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。</p>
  10. <p id="test">鼠标进入或离开的时候会弹出</p>
  11. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  12. <script>
  13. $(document).ready(function(){
  14. $("#test").hover(
  15. function(){
  16. alert("你进入了这里")
  17. },
  18. function(){
  19. alert("你离开了这里")
  20. });
  21. });
  22. </script>
  23. </body>
  24. </html>
结果

focus()事件与blur()事件
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:
当元素失去焦点时,发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:
实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>选中变颜色</title>
  6. </head>
  7. <body>
  8. <a>当元素获得焦点时,发生 focus 事件。
  9. 当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
  10. focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:
  11. </a>
  12. Name:<input type="text" name="fullname">
  13. Email:<input type="text" name="email">
  14. <script src="../../jQuery_code/jquery-3.2.1.min.js"></script>
  15. <script>
  16. $(document).ready(function(){
  17. $("input").focus(function(){
  18. $(this).css("background-color","#cccccc")
  19. });
  20. $("input").blur(function(){
  21. $(this).css("background-color","#ffffff")
  22. });
  23. });
  24. </script>
  25. </body>
  26. </html>
结果

 

转载请注明:清麟博客 » jQuery基础

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址