JavaScript之jQuery

九、jQuery

目录:初识jQuery及公式、jQuery选择器、jQuery事件、jQuery操作DOM元素

1.初识jQuery及公式

jQuery库,里面存在大量的JavaScript。
1)获取jQuery
jQuery官网:http://jquery.com,可以下载放入项目中使用。
还可以使用在线cdn加速链接,jQuery cdn加速网址:http://www.bootcdn.cn/jquery/
2)公式$(selector).action()
例:a链接被点击跳出弹窗

<a href=" " id="test-jquery">点我</a>
<script>
  //原生的JS代码
  var id = document.getElementById('test-jquery');
  id.click(…);
  //用jQuery的选择器,本质上是CSS选择器
  $('#text-jQuery').click(function() {
    alert('hello jquery');
  })
</script>

2.jQuery选择器

1)原生的js选择器(太少且不好记)
①标签

document.getElementsByTagName();

②id

document.getElementById();

③类

document.getElementsByClassName();

2)jQuery中CSS选择器都能用
①标签
例:p标签

$('p').action();

②id

$('#id').action();

③类

$('.class').action();

jQuery文档工具类:http://jquery.cuishifeng.cn/

3.jQuery事件

鼠标事件、键盘事件、其它事件
当网页元素加载完毕之后,响应事件:

$(document).ready(function() { })

等同于

$(function() { })

例:获取鼠标当前的一个坐标

<html>
  <head>
    <title>获取鼠标当前的一个坐标</title>
    <style>
      #divMove {
        width:500px;
        height:500px;
        border:1px solid red;
      }
    </style>
  </head>
  <body>
    mouse:<span id="mouseMove"></span>
    <div id="divMove">在这里鼠标移动试试</div>
    <script>
      $(function() {
        $('#divMove').mousemove(function(e) {
          $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
        })
      })
    </script>
  </body>
</html>

4.jQuery操作DOM元素

<ul id="test-ul">
  <li class="js">JavaScript</li>
  <li name="java">Java</li>
</ul>

1)节点文本操作

$('#test-ul li[name=java]').text();//获得值
$('#test-ul li[name=java]').text('值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('值');//设置值

2)CSS的操作

$('#test-ul li[name=java]').css({"color","red"})

3)元素的显示和隐藏
本质:CSS的display:none;

$('#test-ul li[name=java]').show();//显示
$('#test-ul li[name=java]').hide();//隐藏

总结:前端三剑客学习技巧

1)巩固JS(看jQuery源码)
2)巩固HTML+CSS(扒网站,全部拷下来,然后对应修改看效果)

推荐阅读更多精彩内容

  • jQuery相关文档 1、官网 https://jquery.com/[https://jquery.com/]2...
    李老八_6f45阅读 45评论 0 0
  • 一、jQuery简介 1、什么时jQuery·jQuery时一个高效,精简并且功能丰富的JavaScript工具库...
    故乡小城阅读 60评论 0 0
  • jQuery学习: 最好的学习方法:查看jQuery的API jQuery下载: jQuery官网:http://...
    被时光移动的城阅读 139评论 0 2
  • 作为一个前端程序猿,下面这些站会让你眼前一亮。 amazeui框架组建丰富 http://amazeui.org...
    欧巴冰冰阅读 7,596评论 18 305
  • jQuery简介 对选择元素的方法进行了优化 是一个高效的,精简并且功能丰富的JavaScript工具库 版本发展...
    amanohina阅读 38评论 0 0