jQuery

封装了许多JavaScript方法的库

可以通过cdn（内容分发网络，就近发送）链接访问

www.jq22.com/cdn/

<script src="jQuerycdn地址">
    
</script>

jQuery使用

公式：$(选择器).action()

<a href="#" id="a_jquery">点我</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $('#a_jquery').click(function (){
        alert("hello")
    });
</script>

jQuery选择器

css中的选择器jQuery都可以使用

$('a').click();//标签
$("a_jquery").click();//id
$('.classname').click();//类

文档帮助：jquery.cuishifeng.cn/

jQuery事件（鼠标，键盘）

鼠标事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #cans{
            width: 300px;
            height: 300px;
            border: 2px red solid;
        }
    </style>
    
</head>
<body>
画画<span id="draw"></span>
<p>
<canvas id="cans">


</canvas>
<script>
    $('#cans').mousemove(function(e){
        $('#draw').text("x:"+e.pageX+"y:"+e.pageY)
    });
</script>
</body>
</html>

//当网页加载完成之后，响应事件
$(document).ready(function(){})
//简写
$(function(){})

操作Dom

  //获取值
  $('#ul1').text();
  $('#ul1').html();
  //设置值
  $('#li1').text('new javascript');
  $('#li1').html('<strong>new html</strong>');

text 返回的是标签下的文本

$('#ul1').text(); " javascript python css "

html()返回的是匹配元素的html内容

$('#ul1').html(); "

new javascript

python

css

“

css操作

//             对象      值
$('#ul1').css("color","red")

元素的显示与隐藏

本质是display的设置（display：none）

$('#li1').hide()//隐藏 display：none
$('#li1').show()//显示

JS-02-JQuery

jQuery

jQuery使用

jQuery选择器

jQuery事件（鼠标，键盘）

操作Dom