JQuery详解

事件

鼠标事件 键盘事件 其他事件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js">script>
head>
<style>
      #divMove{
      
          width: 500px;
          height: 500px;
          border: 1px solid black;
      }
style>

<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>

操作DOM

节点文本操作


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js">script>
head>
<body>

<ul id="father">
    <li id="js">JavaScriptli>
    <li name="python">Pythonli>
ul>

<script>
    // 获得值
    $('#father li[id=js]').text();
    //设置值
    $('#father li[id=js]').text('123');

    // 获得值
    $('#father li[id=js]').html();
    //设置值
    $('#father li[id=js]').html('123>');
    


script>
body>
html>

操作css

 $('#father li[id=js]').css("color","red");

元素的显示和隐藏

$('#father li[id=js]').show();  //显示
$('#father li[id=js]').hiden(); //隐藏

你可能感兴趣的:(Js,笔记,学习,jquery,js,html)