jQuery 教程

た入场券 2022-10-22 05:29 137阅读 0赞

### 文章目录 ###

*  jQuery 教程
 *   *  文档就绪函数
     *  jQuery 元素选择器
     *  jQuery 属性选择器
     *  jQuery CSS 选择器
     *  jQuery AJAX
     *   *  jQuery load() 方法
         *  jQuery $.get() 方法
         *  jQuery $.post() 方法
         *  jQuery ajax() 方法
     *  jQuery 事件函数
     *  点击事件
     *   *  两种点击事件的区别
     *  JQ的一些方法
     *   *  html()方法
         *  attr()方法
         *  change()方法
         *  show()方法
         *  hide()方法
         *  addClass()方法
         *  removeClass()方法
         *  append()方法
         *  addClass()方法
         *  css()方法
         *  val()方法
         *  is()方法
         *  clone()方法
         *  animate() 方法
         *  stop() 方法
         *   *  在stop().animate()
         *  eq() 方法
         *  siblings() 方法
         *  hover() 方法
         *  index() 方法
     *  JQ的一些实际运用
     *   *  1. 点击按钮置灰

# jQuery 教程 #

https://jquery.cuishifeng.cn/

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

基础语法是：$(selector).action()

*  美元符号定义 jQuery
 *  选择符（selector）“查询”和“查找” HTML 元素
 *  jQuery 的 action() 执行对元素的操作

**示例**

> $(this).hide() - 隐藏当前元素
> 
> $(“p”).hide() - 隐藏所有段落
> 
> $(".test").hide() - 隐藏所有 class=“test” 的所有元素
> 
> $("\#test").hide() - 隐藏所有 id=“test” 的元素

## 文档就绪函数 ##

一般而言，jQuery都会从document ready函数开始

在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
    
    --- jQuery functions go here ----
    
    });
    
    // 简写方法
    $(function() {
     
    --- jQuery functions go here ----  
        
    });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

## jQuery 元素选择器 ##

jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=“intro” 的

元素。

$(“p\#demo”) 选取所有 id=“demo” 的

元素。

## jQuery 属性选择器 ##

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("\[href\]") 选取所有带有 href 属性的元素。

$("\[href=’\#’\]") 选取所有带有 href 值等于 “\#” 的元素。

$("\[href!=’\#’\]") 选取所有带有 href 值不等于 “\#” 的元素。

( " \[ h r e f ("\[href ("\[href=’.jpg’\]") 选取所有 href 值以 “.jpg” 结尾的元素。

## jQuery CSS 选择器 ##

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

## jQuery AJAX ##

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

### jQuery load() 方法 ###

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$('#test').load('/example/jquery/demo_test.txt');

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

*  responseTxt - 包含调用成功时的结果内容
 *  statusTXT - 包含调用的状态
 *  xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
        if(statusTxt=="success")
          alert("外部内容加载成功！");
        if(statusTxt=="error")
          alert("Error: "+xhr.status+": "+xhr.statusText);
      });

### jQuery $.get() 方法 ###

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
      $.get("demo_test.asp",function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });

### jQuery $.post() 方法 ###

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
      $.post("demo_test_post.asp",
      {
        name:"Donald Duck",
        city:"Duckburg"
      },
      function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });

### jQuery ajax() 方法 ###

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

$.ajax({
        url:"demo_ajax_load.txt",
        async:true,
        success:function(result){
    			$("div").html(result);
    		}});

必需的 URL 参数规定您希望请求的 URL。

async 布尔值，表示请求是否异步处理。默认是 true。

dataType 预期的服务器响应的数据类型。（json）

data 规定要发送到服务器的数据。

type 规定请求的类型（GET 或 POST）。

success(result,status,xhr) 当请求成功时运行的函数。

## jQuery 事件函数 ##

jQuery 事件处理方法是 jQuery 中的核心函数。

在上面的例子中，当按钮的点击事件被触发时会调用一个函数

## 点击事件 ##

$(document).on(“click”,“指定的元素”,function()\{\});

点击下一张轮播图按钮

// 下一个按钮
    		$('.next').on('click', function() {
    			i++;
    			if (i == $('.img li').length) {
    				debugger;
    				i = 1; //这里不是i=0
    				$('.img').css({
    					left: 0
    				}); //保证无缝轮播，设置left值
    			};
    
    			$('.img').stop().animate({
    				left: -i * 775
    			}, 300); //图片宽度为775
    
    			if (i == $('.img li').length - 1) { //设置小圆点指示
    				$('.num li').eq(0).addClass('active').siblings().removeClass('active');
    				$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
    			} else {
    				$('.num li').eq(i).addClass('active').siblings().removeClass('active');
    				$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
    			}
    
    		});

### 两种点击事件的区别 ###

> .click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事件的
> 
> 而$(document).on(“click”,function()\{\});方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件

## JQ的一些方法 ##

### html()方法 ###

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

例子：多选框

//html
    <select class="mail_domain"></select>

//js
    function htmlSelect() {
    		let item = '123';
    		let _option = '<option value="' + item + '">' + item + '</option>';
    		$('.mail_domain').html(_option);
    	}

### attr()方法 ###

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。

当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

$("img").attr("width","500");

### change()方法 ###

当元素的值改变时发生 change 事件（仅适用于表单字段）。

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

**注意**：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

触发被选元素的 change 事件：

$("button").click(function(){
        $("input").change();
      });

添加函数到 change 事件：

$('.mail_domain').change(function () {
            var selectedValue = $('.mail_domain').val();
            $('.mail_domain').attr('data-value', selectedValue);
          });

### show()方法 ###

show()方法显示隐藏的被选元素。

$("p").show();

### hide()方法 ###

hide()方法隐藏显示的被选元素。

$("p").hide();

### addClass()方法 ###

addClass() 方法向被选元素添加一个或多个类名。

$('body').addClass('mobile_body');

### removeClass()方法 ###

removeClass() 方法从被选元素移除一个或多个类。

$('body').removeClass('mobile_body');

### append()方法 ###

jQuery append() 方法在被选元素的结尾插入内容。

通常用来在标签中添加标签

$('.num').append('<li></li>');

### addClass()方法 ###

向被选元素添加一个或多个类

$('.num li').first().addClass('active'); //给第一个元素添加样式

### css()方法 ###

css() 方法为被选元素设置或返回一个或多个样式属性。

$('body > div').css('background', 'inherit');
     $('.bg').css('display', 'block');

### val()方法 ###

val() 方法返回或设置被选元素的 value 属性。

当用于返回值时：

$(selector).val()

当用于设置值时：

$('.phoneBox ._sms_phoneNumber').val(userName);

### is()方法 ###

is() 方法用于查看选择的元素是否匹配选择器。

例一：判断元素的父级元素

if ($("p").parent().is("div")) {
        alert("p 的父元素是 div");
    }

例二：判断元素的伪类

if (!$('.' + arrClass[index]).is(':hidden')) {
    ...
    }

### clone()方法 ###

复制一个元素

实例：复制一个图，并放到最后面

var firstimg = $('.img li').first().clone(); //复制第一张图片
    $('.img').append(firstimg).width($('.img li').length * ($('.img img').width()));
    		//第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度

### animate() 方法 ###

允许您创建自定义的动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把

元素移动到左边，直到 left 属性等于 250 像素为止：

$("button").click(function(){
      $("div").animate({left:'250px'});
    });

### stop() 方法 ###

停止当前正在运行的动画：

$("#stop").click(function(){
      $("#box").stop();
    });

#### 在stop().animate() ####

每一次移入或移出元素，都会产生一个动画，如果该动画没有被执行完，它就会被添加到动画队列中去，然后没有被执行完的动画会继续执行，直到所有动画执行完毕。

针对这个 bug，我们只需要在移入或移出元素产生的动画执行之前加入 stop() 方法，就能轻松解决。

$('.img').stop().animate({
    	left: -i * 775
    }, 300); //图片宽度为775

### eq() 方法 ###

eq() 方法返回带有被选元素的指定索引号的元素。

索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

$('.num li').eq(0)

### siblings() 方法 ###

siblings() 方法返回被选元素的所有同级元素。

同级元素是共享相同父元素的元素。

返回带有类名 "start" 的每个 li 元素的所有同级元素：
    
    $(document).ready(function(){
    $("li.start").siblings().css({"color":"red","border":"2px solid red"});
    });

### hover() 方法 ###

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter 和 mouseleave 事件。注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

语法  
$(selector).hover(inFunction,outFunction)

//设置按钮的显示和隐藏
    		$('.banner').hover(function() {
    			$('.btn').show();
    		}, function() {
    			$('.btn').hide();
    		});

### index() 方法 ###

index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。

注意：如果未找到元素，index() 将返回 -1。

常用于获得被点击的

*  元素相对于它的同级元素的 index：
 *      $('.num li').mouseover(function() {
        			var _index = $(this).index();
        			console.log($(this).index());
        		});
    
    ## JQ的一些实际运用 ##
    
    ### 1. 点击按钮置灰 ###
    
    普通按钮不可点击
    
        $('.button').attr('disabled', true);
    
    div不可点击
    
        $('#usernamaSubmit').addClass('notClick');
    
    css
    
        // 登录按钮div不可点击
        .notClick {
          background: #9e9e9e !important;
          pointer-events: none;
        
          &:hover {
            background: #9e9e9e !important;
          }
        }