JQuery

/ 前端 / JQuery

自定义jquery方法

/**
 * 元素禁用使用
 * @author M1nG
 * @param  要禁用的毫秒值 默认1500 即为1.5s
 * @description  可以用来防止连续点击 示例 $("XX").ban();
 */
;(function ($) {
    $.fn.extend({
        ban: function (options) {
            if (typeof (options) == "number") defaluts = parseInt(options);
            return this.each(function () {
                var $this = $(this);
                $this.addClass("ban");
                setTimeout(function () {
                    $this.removeClass("ban");
                }, defaluts);
            });
        },
    });
    var defaluts = 1500;
})(jQuery);

互转

$(DOM对象)      就是jQuery对象

$ ("#txtName")[0] 就是DOM对象

// 按注册的顺序调用， 先注册先调用 ， 可以嵌套
// 等同于 $(document).readu(), 但是高版本里已经启用。
$(function () {
    $(function () {
				 //这里是在第二轮调用
    })
});

<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

选择器

$() 一直都是一个数组, 除了用id之外

jQuery判断元素是否绑定事件_just4you的博客-CSDN博客

On previous versions, you could call it like for other data : In jQuery 1.8, this direct access was removed, so in recent versions you must call it like this : 即小于1.8的版本使用obj.data('event')；而在JQuery1.8版本取消了obj.data方法，改为$._data方法。 $._data(obj[0],"event") 中的obj[0],一定要加上数组[0]下标，否则会取不到数据。

https://blog.csdn.net/just4you/article/details/52838435

is()用法，next（）用法

if($(".cur").is("div:last")){
	$(".cur").removeClass("cur");
	$("div:first").addClass("cur");
}else{
	$(".cur").removeClass("cur").next().addClass("cur");//添加类选择器
}

切换可见状态

$("li:gt(5):not(:last)").toggle();  

获取元素上的事件

var $events = $._data(oDrag[0], 'events');
if ($events && $events["mousedown"]) {
    oDrag.css("cursor", "default");
    oDrag.draggable("disable");
    dragToggleBtn.text("解锁")
}

css()

css(name,value)

css({name:value, name:value,name:value…})

后面不带值就是读取值

addClass()

addClass(“class1 class2 … classN”)

toggleClass()

节点操作

val()  针对input标签

document.write()  这个方法只有document有element.innerText=""$("p").html("Hello");//全部替换$("p").append("world")

创建节点元素

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点   $(“<li title=‘标题为千与千寻’>千与千寻</li>”)

替换

$(A).replaceWith(B)  把A用B替换掉

$(A).replaceAll(B)  把A用来替换掉所有的B

复制粘贴

$("ul li:eq(1)").clone(true).appendTo("ul");

所以区别就是detach删除再添加回去事件还在。（删除之后再在同样位置添加同样标签事件会不会生效？？？）

isNAN

是不是非数字 is not a number?

$("#show").removeAttr("style"); //ie,ff均支持
$("." + this.bigimg).attr("src", dataURL).fadeIn().load(function () {//imgSrc是图片地址
$("." + this.bigimg).css({
            height: realHeight,
            width: realWidth,
        });
$(".imgNotify" + time).removeClass("showing")
$(".imgNotify" + time).addClass("showing")

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

$('div.noview').hide()

a.items[0].name

$("#mySelect").find("span.tagChild").each(function () { console.log($(this).parent().parent().addClass("disabled")); })
$("#mySelect").find("span.tagChild").each(function () { console.log($(this).parent().parent().removeClass("disabled")); })
$("#mySelect").find("span.tagChild").each(function () { console.log($(this).hide()); })
$("#mySelect").find("span.tagChild").each(function () { console.log($(this).show()); })

<label>
	<input type="checkbox" name="item" onchange="childOrLadySelect('child',this)">
	有小孩
</label>

function childOrLadySelect(which, value) {
    console.log(which)
    console.log($(value).is(':checked'))
    temp=null;
    if(which==='child')
        temp=$("#mySelect").find("span.tagChild")
    else if(which==='lady')
        temp=$("#mySelect").find("span.tagLady")
    else
        return;
        
    if($(value).is(':checked')){
        temp.each(function () { ($(this).parent().parent().addClass("disabled")); })
        temp.each(function () { ($(this).show()); })
    }else{
        temp.each(function () { ($(this).parent().parent().removeClass("disabled")); })
        temp.each(function () { ($(this).hide()); })
    }
        
    $("#mySelect").find("span.tagChild").each(function () { console.log($(this).parent().parent().addClass("disabled")); })
    $("#mySelect").find("span.tagChild").each(function () { console.log($(this).parent().parent().removeClass("disabled")); })
    $("#mySelect").find("span.tagChild").each(function () { console.log($(this).hide()); })
    $("#mySelect").find("span.tagChild").each(function () { console.log($(this).show()); })
}

attr 和 prop 区别

经过在网上搜素和测试总结

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

请求

目录CONTENT

JQuery

评论区