jquery使用

智江鹏

已于 2022-04-27 17:10:25 修改

阅读量1.3k

点赞数 2

分类专栏：前端文章标签： jquery

于 2022-04-14 15:29:51 首次发布

本文链接：https://blog.csdn.net/zxc472504515/article/details/124172260

版权

前端专栏收录该内容

36 篇文章 3 订阅

订阅专栏

入口函数

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象就是 DOM 对象
2. jQuery 方法获取的元素就是 jQuery 对象。

3. 只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法

jQuery 对象和 DOM 对象转换

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

层级选择器

筛选选择器

//筛选ul中li的一个
$("ul li:first").css("color", "red");
//筛选ul中li的下标值为2的
$("ul li:eq(2)").css("color", "blue");
//筛选ul中li中下标值为奇数的
$("ol li:odd").css("color", "skyblue");
//筛选ul中li中下标值为偶数的
$("ol li:even").css("color", "pink");

设置样式

1.$('div').css('属性', '值')

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

设置类样式方法

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

链式编程

 $(this).css('color', 'red').sibling().css('color', '');

jQuery 效果

- 显示隐藏：show() / hide() / toggle() ;

$("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })

- 划入画出：slideDown() / slideUp() / slideToggle() ;

 $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });




 
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 

$("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });

- 自定义动画：animate() ;

  $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })

停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

	停止动画排队的方法为：stop() ; 

- stop() 方法用于停止动画或效果。
- stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

        总结: 每次使用动画之前，先调用 stop() ,在调用动画。

事件切换

hover([over,]out)     // 其中over和out为两个函数
```

- over:鼠标移到元素上要触发的函数（相当于mouseenter）
- out:鼠标移出元素要触发的函数（相当于mouseleave）
- 如果只写一个函数，则鼠标经过和离开都会触发它

**hover事件和停止动画排列案例**

```javascript
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

### 1.1.1 元素固有属性值 prop()

	所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。 

**语法**


	注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

### 1.1.2 元素自定义属性值 attr()

	用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。 

**语法**


	注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

### 1.1.3 数据缓存 data()

	data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

   //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));

文本属性值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

 // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");

遍历元素

  // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })

元素创建、添加、删除

 // 1. 创建元素
            var li = $("<li>我是后来创建的li</li>");
      
            // 2. 添加元素
            // 	2.1 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            //  2.2 外部添加
            var div = $("<div>我是后妈生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

jQuery 尺寸操作

 // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));

位置操作

  // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })

事件注册

 // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });

事件处理

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

 // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以实现事件委托（委派）
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

解绑事件

在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

	// 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })

自动触发事件

   // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");

事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生

   $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })

拷贝对象

	// 1.合并数据
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
   			// 2. 会覆盖 targetObj 里面原来的数据
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);

checkbox操作

1、设置不选中：
$("#my-checkbox").prop("checked",false);
 
 
2、设置选中：
$("#my-checkbox").prop("checked",true);
 
 
3、获取选中的状态：
let status = $("#my-checkbox").prop("checked");
 
4、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');
 
 
5、设置最后一个checkbox为选中值
$('input:checkbox:last').attr('checked', 'checked');
或者
$('input:checkbox:last').attr('checked', 'true');
 
 
6、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

form操作

1.数据序列化
 
<form class="form-horizontal m" id="form-obupublish-add">
    <div class="form-group">    
        <label class="col-sm-3 control-label">发布名称：</label>
        <div class="col-sm-8">
            <input name="obuPublishName" class="form-control" type="text" required>
        </div>
    </div>
    <div class="form-group">    
        <label class="col-sm-3 control-label">类型：</label>
        <div class="col-sm-8">
            <select name="obuPublishType" class="form-control m-b" id="type" onchange="start()">
                <option value="蓝牙">蓝牙</option>
                <option value="OBU">OBU</option>
            </select>
 
        </div>
    </div>
</form>
 
 
2.序列化
 $('#form-obupublish-add').serialize()
 
3.验证插件
$("#signupForm").validate({
    rules: {
        username: {
            required: true
        },
        password: {
            required: true
        }
    },
    messages: {
        username: {
            required: icon + "请输入您的用户名",
        },
        password: {
            required: icon + "请输入您的密码",
        }
    }
})

select操作

 
<select name="obuPublishType" class="form-control m-b" id="type" onchange="start()">
    <option value="蓝牙">蓝牙</option>
    <option value="OBU">OBU</option>
</select>
 
1.获取select选中的下标值
var index = $('#ele').prop('selectedIndex');
console.log("选择！"+index)
 
 
2.获取被选中的option标签
var vs = $('#type  option:selected').val();
console.log(vs);
 
 
3.动态设置select的内容
<div class="form-group">    
    <label class="col-sm-3 control-label">厂家：</label>
    <div class="col-sm-8">
        <select name="obuPublishFactory" class="form-control m-b" id="factory">
 
        </select>
 
    </div>
</div>
 
function changjia() {
 
 
    $.ajax({
        type: "POST",
        url: "/bluetooth-server/ble_userinfo/ble_userinfo/listforfactory",
        success: function (data) {
            console.log(data);
            var vaule = data.total;
 
            if (vaule > 0) {
                datas = data.rows;
 
                var optionstring = "";
                for (var j = 0; j < datas.length; j++) {
                    console.log(datas[j]);
                    optionstring += "<option value=\"" + datas[j] + "\" >" + datas[j] + "</option>";
                }
 
                $("#factory").html(optionstring);
 
 
            } else {
                alert("暂无文件选择，请先上传文件！")
 
                $("#factory").html("<option value=''>暂无</option>");
 
            }
        }
    });
}

img操作

<img onfocus=this.blur() id="img_a" border=0 align="middle" 
src="login_image/a_1.jpg" alt="没有图片！"> </img>
 
 
1.img 获取图片属性
$("img").attr("src");
 
2.img 动态设置图片
$("#img_a").attr("src", "login_image/b_2.jpg");
 
3.img移除图片属性
$("img_a").removeAttr("src");

input操作

var username = $.common.trim($("input[name='username']").val());
var password = $.common.trim($("input[name='password']").val());
var validateCode = $("input[name='validateCode']").val();
var rememberMe = $("input[name='rememberme']").is(':checked');

ajax递交数据

 $.ajax({
                type: "POST",
                url: "/Login/Loginin",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data),
                dataType: "json",
                success:function (message) {
                    if (message.code == 200) {
                        layer.msg('登录成功', function () {
                            window.location = '/main.html';
                            return true;
                        });
                    }else {
                        layer.msg('登录失败'+JSON.stringify(message.message), function () {
                            return false;
                        });
                    }
 
                },
                error:function (message) {
                      alert("提交失败"+JSON.stringify(message));
                    return false;
                }
            });
----------------------------------------------------------------------
function start() {
    //获取被选中的option标签
    var vs = $('#type  option:selected').val();
    console.log(vs);
    $.ajax({
        type: "POST",
        url: "/bluetooth-server/obufile/obuupdata/factorylist",
        data: {
            obufileFactory: vs
        },
        success: function (data) {
            console.log(vs);
            var vaule = data.total;
 
            if (vaule > 0) {
                datas = data.rows;
 
                var optionstring = "";
                for (var j = 0; j < datas.length; j++) {
                    console.log(datas[j].obufileVersion);
                    optionstring += "<option value=\"" + datas[j].obufileVersion + "\" >" + datas[j].obufileVersion + "</option>";
                }
 
                $("#ele").html(optionstring);
                var datac = datas[0].obufileAddress;
                $("#url").val(datac);
            } else {
                alert("暂无文件选择，请先上传文件！")
                $("#url").val("");
                $("#ele").html("<option value=''>暂无</option>");
 
            }
        }
    });
}

智江鹏

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
jquery使用

入口函数// 第一种: 简单易用。$(function () { ... // 此处是页面 DOM 加载完成的入口}) ; // 第二种: 繁琐，但是也可以实现$(document).ready(function(){ ... // 此处是页面DOM加载完成的入口});jQuery 对象和 DOM 对象1. 用原生 JS 获取来的对象就是 DOM 对象2. jQuery 方法获取的元素就是 jQuery 对象。3.只有 jQuery 对象才...
复制链接

扫一扫