JavaScript之jQuery

2021-01-20 本文已影响0人 Ping开源

九、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（扒网站，全部拷下来，然后对应修改看效果）