jQuery框架快速入门

jQuery快速入门

jQuery介绍

jQuery 是一个 JavaScript 库。
所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就
是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。
jQuery 官网:https://www.jquery.com

jQuery框架快速入门_第1张图片

将原生JavaScript类比为楼梯,那么jQuery就是电梯

jQuery基本语法

JS对象和jQuery对象转换

  • jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象,而不是

  • JS 方式获得的 DOM 对象,二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。

    JS 的 DOM 对象转换成 jQuery 对象

    $(JS的DOM对象)

  • jQuery对象转换成JS对象

    jQuery对象[索引]

    jQuery对象.get(索引);

jQuery的事件

在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法

常见的事件

事件名 说明
load 当页面或图像被加载完成
submit 当表单提交时触发该事件
click 鼠标单击事件
dbclick 鼠标双击事件
blur 元素失去焦点
focus 元素获得焦点
change 用户改变域的内容

事件的绑定和解绑

  • 绑定事件

    jQuery对象.on(事件名称 , 匿名函数)

  • 解绑事件

    jQuery对象 . off(事件名称)

    如果不传入事件名称,则解绑该对象的所有事件

遍历

方式一:传统方式

for(let i = 0 ; i < 容器对象长度 ; i++ ){

​ 执行功能

}

方式二:对象 . each()方法

容器对象 . each(function(index , ele){

​ 执行功能

});

方式三:$ . each() 方法

$.each(容器对象,function(index , ele){

​ 执行功能;

});

方式四:for of 语句

for(ele of 容器对象){

​ 执行功能

}

jQuery选择器

基本选择器

  • 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。
  • 例如:id 选择器、类选择器、元素选择器、属性选择器等等。
  • jQuery 中选择器的语法:$();

基本选择器

jQuery框架快速入门_第2张图片

层级选择器

jQuery框架快速入门_第3张图片

属性选择器

jQuery框架快速入门_第4张图片

过滤选择器

jQuery框架快速入门_第5张图片

表单属性选择器

jQuery框架快速入门_第6张图片

jQuery DOM

操作文本

jQuery框架快速入门_第7张图片

html可以解析标签,text()方法是纯文本的方法,不会解析标签

操作对象

jQuery框架快速入门_第8张图片

操作样式

jQuery框架快速入门_第9张图片

操作属性

jQuery框架快速入门_第10张图片

prop多用于设置布尔类型的属性值

复选框Demo


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框title>
head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            th>
    
            <th>分类IDth>
            <th>分类名称th>
            <th>分类描述th>
            <th>操作th>
        tr>
        <tr>
            <td><input type="checkbox" class="item">td>
            <td>1td>
            <td>手机数码td>
            <td>手机数码类商品td>
            <td><a href="">修改a>|<a href="">删除a>td>
        tr>
        <tr>
            <td><input type="checkbox" class="item">td>
            <td>2td>
            <td>电脑办公td>
            <td>电脑办公类商品td>
            <td><a href="">修改a>|<a href="">删除a>td>
        tr>
        <tr>
            <td><input type="checkbox" class="item">td>
            <td>3td>
            <td>鞋靴箱包td>
            <td>鞋靴箱包类商品td>
            <td><a href="">修改a>|<a href="">删除a>td>
        tr>
        <tr>
            <td><input type="checkbox" class="item">td>
            <td>4td>
            <td>家居饰品td>
            <td>家居饰品类商品td>
            <td><a href="">修改a>|<a href="">删除a>td>
        tr>
    table>
body>
<script src="js/jquery-3.3.1.min.js">script>
<script>
    //全选
    //1. 为全选按钮绑定单击事件
    $("#selectAll").click(function(){
        //2. 获取所有的商品项复选框元素,为其添加checked属性,属性值为true
        $(".item").prop("checked",true);
    });

    //全不选
    //1. 为全不选按钮绑定单击事件
    $("#selectNone").click(function(){
        //2. 获取所有的商品项复选框元素,为其添加checked属性,属性值为false
        $(".item").prop("checked",false);
    });

    //反选
    //1. 为反选按钮绑定单击事件
    $("#reverse").click(function(){
        //2. 获取所有的商品项复选框元素,为其添加checked属性,属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
script>
html>

你可能感兴趣的:(jquery)