侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

JQuery

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 178 阅读 / 1,235 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

自定义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之外
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()

0

评论区