首页 前端知识 一小时快速上手jQuery

一小时快速上手jQuery

2024-06-24 23:06:13 前端知识 前端哥 759 22 我要收藏

一小时快速上手jQuery

    • jQuery对象
    • jQuery选择器
      • 基础选择器
        • id选择器
        • 元素名称选择器
        • 类选择器
        • 通用选择器
        • 组合选择器
      • 层次选择器
        • 后代选择器
        • 子代选择器
        • 相邻选择器
        • 同辈选择器
      • 表单选择器
        • 表单选择器
        • 文本选择器
        • 密码框选择器
        • 单选按钮选择器
        • 复选框选择器
        • 提交按钮选择器
        • 图像域选择器
        • 重置按钮选择器
        • 按扭选择器
        • 文件域选择器
    • 操作元素的属性
      • 属性的分类
      • 获取属性
      • 设置属性
      • 移除属性
    • 操作元素的样式
    • 操作元素的内容
    • 创建元素
    • 添加元素
    • 删除元素
    • 遍历元素
    • jQuery事件
      • ready加载事件
      • bind()绑定事件
    • jQuery Ajax
      • $.ajax
      • $.get
      • $.post
      • $.getJSON

此教程注重理论知识部分,实践部分后期会更新(结合我的毕业设计!!!)

jQuery对象

Dom对象

  • 通过js方式获取的元素对象

jQuery对象

  • 通过jQuery方法获取的元素对象,返回的是jQuery的包装集

使用jQuery时一定要在首部先引入jQuery文件

Dom对象转jQuery对象

  • 只需用$包括起来即可

    var Domdiv=document.getElementById("div");
    var divjQuery=$(Domdiv);
    

jQuery对象转Dom对象

  • 获取包装集指定下标的元素即可

    var div=divjQuery[0];
    

jQuery选择器

基础选择器

id选择器
var div=$("#div");//选择指定id的元素对象
元素名称选择器
var div=$("div");//选择指定标签的元素对象
类选择器
var div=$(".div");//选择指定class的元素对象
通用选择器
var all=$("*");//选择所有元素对象
组合选择器
var divs=$("#div1,#div2,#div3");//选择指定选择器的元素对象

层次选择器

后代选择器
var div=$("#parent div");//选择id为parent的父元素的所有(包含第一代,第二代等)div元素
子代选择器
var div=$("#parent>div");//选择id为parent的直接(第一代)div子元素
相邻选择器
var div=$(".parent+div");//选择css类为parent的下一个div元素(只会查找下一个元素,如果元素不存在,则获取不到)
同辈选择器
var div=$(".parent~div");//选择css类为parent的之后的div元素(选择元素下面的所有指定元素)

表单选择器

表单选择器
$(":input");//查找所有input元素
文本选择器
$(":text");//查找所有文本框
密码框选择器
$(":password");//查找所有密码框
单选按钮选择器
$(":radio");//查找所有单选按钮
复选框选择器
$(":checkbox");//查找所有复选按钮
提交按钮选择器
$(":submit");//查找所有提交按钮
图像域选择器
$(":image");//查找所有图像域
重置按钮选择器
$(":reset");//查找所有重置按钮
按扭选择器
$(":button");//查找所有按钮
文件域选择器
$(":file");//查找所有文件域

操作元素的属性

属性的分类

固有属性:id,name,class,style

返回值时boolean的属性:checked,selected,disabled

自定义属性:用户自己定义的属性

如果属性的类型是boolean,则使用prop()方法,否则使用attr()方法

获取属性

attr("属性名");
prop("属性名");

区别

  • 如果是固有属性,attr()和prop()方法均可获取
  • 如果是自定义属性,attr()可获取,prop()不可获取
  • 如果是返回值是boolean类型的属性
    • 若设置了属性,attr()返回具体的值,prop()返回true
    • 若未设置属性,attr()返回undefined,prop()返回false

设置属性

attr("属性名","属性值");
prop("属性名","属性值");

移除属性

removeAttr("属性名");

操作元素的样式

attr("class");//获取元素的样式名
attr("class","样式名");//设置元素的样式,原本的样式会被覆盖
addClass("样式名");//添加样式,原本样式保留,出现相同样式,以后定义的为准
css();//添加具体的样式(行内样式)
//css("具体样式名","样式值")
//css({"具体样式名":"样式值","具体样式名":"样式值"})
removeClass("样式名");//移除样式

操作元素的内容

html()//获取元素的内容,包含html标签(非表单元素)
html("内容")//设置元素的内容,包含html标签(非表单元素)
text()//获取元素的纯文本内容,不识别HTML标签(非表单元素)
text("内容")//设置元素的纯文本内容,不识别HTML标签(非表单元素)
val()// 获取元素的值(表单元素)
val("值")// 设置元素的值(表单元素)

创建元素

$("<p>添加元素</p>");

添加元素

prepend(content);//在被选元素内部的开头插入元素或内容,被追加的content参数。可以是字符,HTML元素标记
$(content).prependTo(selector);//把content元素或内容加入selector元素内部开头
append(content);//在被选元素内部的结尾插入元素或内容,被追加的content参数,可以是字符,HTML元素标记
$(content).appendTo(selector);//把content元素或内容插入selector元素内,默认是在尾部
before();//在元素前插入指定的元素或内容:$(selector).before(content)
after();//在元素后插入指定的元素或内容:$(selector).after(content)

在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置

如果元素本身存在(已有元素),会将原来元素直接剪切设置到指定位置

删除元素

var div=$("div");
div.remove();//删除所选元素或指定的子元素,包括整个标签和内容一起删
div.empty();//清空所选元素的内容,保留标签

遍历元素

$(selector).each(function(index,element));//遍历元素

参数function为遍历时的回调函数

index为遍历元素的序列号,从0开始

element时当前的元素,此时是dom元素

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<script>
    $("span").each(function(index,element){
        console.log(index);
        console.log(element);
        console.log(this);
    })
</script>

jQuery事件

ready加载事件

  • 预加载事件
  • 当页面的dom结构加载完毕后执行
  • 类似于js中的load事件
  • ready事件可以写多个

主要为了解决HTML顺序执行的特性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jquery-3.6.3.js" type="text/javascript"></script>
    <title>Document</title>
  <script>
      console.log($("div"));//此处会报错
  </script>
  </head>
  <body>
    <div id="mydiv">文本</div>
  </body>
</html>
$(document).ready(fuction(){
           console.log($("div")); 
                  });
//简写 
$(function(){
     console.log($("div"));
});

bind()绑定事件

为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数

$(selector).bind(eventType [, eventData], handler(eventObject));

eventType:一个字符串类型的事件类型,就是你所需要绑定的事件

[, eventData]:传递的参数,格式:{名:值,名2:值2}

handler(eventObject):该事件触发执行的函数

  • 绑定单个事件

    • bind绑定

      $(“元素”).bind(“事件类型”,function(){

      });

    • 直接绑定

      $(“元素”).事件名(function(){

      });

  • 绑定多个事件

    • bind绑定

      • 同时为多个事件绑定同一个函数

        指定元素.bind(“事件类型1 事件类型2 事件类型3”,function(){

        });

      • 为元素绑定多个事件,并设置对应的函数

        指定元素.bind(“事件类型1”,function(){

        }).bind(“事件类型2”,function(){

        });

      • 为元素绑定多个事件,并设置对应的函数

        指定元素.bind({

        “事件类型”:function(){

        },

        “事件类型”:function(){

        }

        });

    • 直接绑定

      指定元素.事件名(function(){

      }).事件名(function(){

      });

jQuery Ajax

一种异步无刷新技术

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, . p o s t 等。 .post 等。 .post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

$.ajax

jquery调用ajax用法:

格式:$.ajax({});

参数:

​ type:请求方式GET/POST

​ url:请求地址url

​ async:是否异步,默认是true表示异步

​ data:发送到服务器的数据

​ dataType:预期服务器返回的数据类型

​ contentType:设置请求开头

​ success:请求成功时调用此函数

​ error:请求失败时调用此函数

data.json

[
    {
        "userId":1,
        "userName":"zhangsan",
        "userAge":18
    },
    {
        "userId":2,
        "userName":"lisi",
        "userAge":19
    },
    {
        "userId":3,
        "userName":"wangwu",
        "userAge":20
    },
    {
        "userId":4,
        "userName":"zhaoliu",
        "userAge":21
    }
]
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jquery-3.6.3.js"></script>
    <title>Document</title>
  </head>
  <body>
    <button type="button" id="btn">查询数据</button>
  </body>
  <script>
    //点击按钮,发送Ajax请求,将数据显示到页面上
    $("#btn").click(function () {
      $.ajax({
        url: "data.json",
        type: "GET",
        dataType: "json", //将返回值自动封装成json对象
        //请求成功时调用的函数
        success: function (data) {
          console.log(data);
          //将字符串转化为json对象
          // var obj = JSON.parse(data);
          // console.log(obj);
          //Dom节点操作
          var ul = $("<ul></ul>");

          for (var i = 0; i < data.length; i++) {
            var user = data[i];
            var li = "<li>" + user.userName + "</li>";
            ul.append(li);
          }
          console.log(ul);
          $("body").append(ul);
        },
      });
    });
  </script>
</html>

$.get

简单的GET请求功能以取代复杂$.ajax

失败时没有调回函数

$.get(“请求地址”,“请求参数”,function(形参){

});

$.get("data.json",{},function(data){
    console.log(data);
})

$.post

$.post(“请求地址”,“请求参数”,function(形参){

});

$.post("data.json",{},function(data){
    console.log(data);
})

$.getJSON

$.getJSON(“请求地址”,“请求参数”,function(形参){

});

getJSON方式要求返回的数据格式满足json格式(json字符串)如果返回的数据不是json格式的,则无法获取

$.getJSON("data.json",{},function(data){
    console.log(data);
})
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13495.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!