jQuery教程详解

一、jQuery简介

jQuery是一款JavaScript库，简化了HTML文件的遍历和操作、JavaScript代码的书写、事件处理、动画效果和AJAX等操作。它的语法设计使得HTML文档的操作变得更加简单、易读和易于维护。

除了简化常见的JavaScript任务外，jQuery还提供了许多插件，例如日期选择器、滑块、图片库和自动完成等。jQuery兼容各种浏览器。

二、jQuery基础

1、在HTML文件中引入jQuery库

  
  <head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>

2、jQuery选择器

通过选择器可以选择HTML文档中的元素，并对其进行操作。

  
    //选择所有p元素并设置文本颜色为红色
    $('p').css('color', 'red');

3、jQuery事件

通过绑定事件，当用户执行某些操作时，可以触发JavaScript代码。

  
    //点击按钮触发函数
    $('button').click(function() {
      alert('Hello World!');
    });

三、jQuery HTML操作

1、向元素添加内容

通过jQuery的HTML方法可以向元素添加内容，也可以通过append和prepend方法添加内容到元素末尾或顶部。

  
    //添加文本到p元素
    $('p').html('Hello World!');
    
    //添加HTML到p元素末尾
    $('p').append('<span>world</span>');
    
    //添加HTML到p元素顶部
    $('p').prepend('<span>hello</span>');

2、向元素添加属性

通过attr方法可以向元素添加属性，并通过removeAttr方法移除属性。

  
    //添加target属性到链接
    $('a').attr('target', '_blank');
    
    //移除target属性
    $('a').removeAttr('target');

3、CSS操作

通过CSS方法可以改变元素的样式，包括背景颜色、字体颜色和边框等。

  
    //改变所有p元素的背景颜色为红色
    $('p').css('background-color', 'red');

四、jQuery效果

1、隐藏和显示元素

通过hide和show方法可以隐藏和显示元素，也可以通过toggle方法来切换元素的可见状态。

  
    //隐藏p元素
    $('p').hide();
    
    //显示p元素
    $('p').show();
    
    //切换p元素的可见性
    $('p').toggle();

2、动画效果

通过animate方法可以实现元素的动画效果，例如改变元素的位置、大小、透明度和颜色等。

  
    //改变元素的位置和透明度
    $('p').animate({
      left: '100px',
      opacity: '0.5'
    }, 'slow');

五、jQuery AJAX

通过jQuery可以实现AJAX的功能，例如从服务器加载数据、向服务器发送数据和更新页面内容等。

1、向服务器发送数据

  
    //向服务器发送post请求，并传递数据
    $.post('demo_post.php', {
      name: 'John',
      age: '30'
    }, function(data) {
      alert(data);
    });

2、从服务器加载数据

  
    //从服务器加载内容到元素中
    $('#div1').load('demo_test.txt');

六、jQuery插件

jQuery插件可以用于扩展jQuery库的功能，例如日期选择器、图像库和自动完成等。使用jQuery插件可以极大地简化开发工作。

1、日期选择器

通过使用jQuery UI库和Datepicker插件，可以实现日期选择功能。

  
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
        $( function() {
          $( "#datepicker" ).datepicker();
        } );
      </script>
    </head>
  
    <body>
      <label for="datepicker">选择日期:</label>
      <input type="text" id="datepicker">
    </body>

2、滑块控件

通过使用jQuery UI库和Slider插件，可以实现滑块控件。

  
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
        $( function() {
          $( "#slider" ).slider();
        } );
      </script>
    </head>
  
    <body>
      <div id="slider"></div>
    </body>