JQuery笔记_知识点总结

古城微笑少年丶 2022-11-25 11:36 139阅读 0赞

**JQuery笔记\_知识点总结**

--------------------

*  **val() 取表单元素值**

$("#input1").val()

*  **html() 和 text() 获取元素内容（区别是是否包含子标签）**

<div id="d1">
        这是div的内容<span>这是div里的span</span>
    </div>

$("#d1").html()
    
    这是div的内容<span>这是div里的span</span>
    
    
    $("#d1").text()
    
    这是div的内容这是div里的span

*  **addClass() removeClass() toggleClass() 增加 删除 切换样式class**

增加样式 pink
    $("#d").addClass("pink");
    
    删除样式 pink
    $("#d").removeClass("pink");
    
    切换样式 pink （有就删除，没有就增加）
    $("#d").toggleClass("pink");

*  **css() 增加style样式**

$("#d1").css("background-color","pink");
    $("#d2").css({ "background-color":"pink","color":"green"});

*  **选择器**

元素名，id，类名选择器
    $("div")
    $("#d1")
    $(".d")
    
    id为d3的div下的span
    $("div#d3 span")
    
    第一个div，最后一个div，第5个div
    $("div:first")
    $("div:last")
    $("div").eq(4)
    
    奇数div，偶数div，0为偶数
    $("div:odd")
    $("div:even")
    
    可见的div，隐藏的div
    $("div:visible").hide();
    $("div:hidden").show();
    
    有id的div
    $("div[id]")
    
    id是否为pink的div
    $("div[id='pink']")
    $("div[id!='pink']")
    
    id以p开头的div，id以k结尾的div
    $("div[id^='p']")
    $("div[id$='k']")
    
    id包含ee的div
    $("div[id*='ee']")
    
    当前元素（触发事件的元素）
    $(this).hide();
    
    最近的父元素，所有父元素，最近的子元素，所有div子元素，同级元素
    $("#currentDiv").parent()
    $("#currentDiv").parents()
    $("#currentDiv").children()
    $("#currentDiv").find("div")
    $("#currentDiv").siblings()

*  **attr() 获取或修改元素属性值**

获取align属性值：
    $("#h").attr("align")
    修改align属性值
    $("#h").attr("align","right");

*  **removeAttr() 删除属性， prop() 获取属性值**

$("#h").removeAttr("align");
    $("#h").prop("align")
    $("#c").prop("checked")
    
    
    注意：
    prop()不能获取自定义属性的值。
    而attr()只能访问选中属性的初始值，无法获取选中属性(checked,selected)变化以后的值。
    prop()获取的选中属性值为布尔类型。

*  效果：

立即显示、隐藏、切换
    hide()	show()	toggle()
    
    延时显示、隐藏、切换
    hide(1000)	show(1000)	toggle(1000)
    
    上滑隐藏、下滑显示、上下滑动显示切换、延时效果
    slideUp()	slideDown()	slideToggle()	slideUp(2000)
    
    淡入、淡出、切换、延时效果、透明度80%
    fadeIn()	fadeOut()	fadeToggle()	fadeIn(2000)	fadeTo("slow",0.8)
    
    动画效果，2s内变化至指定样式
    animate({ left:'100px',height:'50px'},2000)

*  事件

页面加载完毕（不包含图片等非文字媒体文件）
    $(document).ready(function(){ 
        $("#message1").html("页面加载成功");
    });
    $(function(){ 
    	$("#message1").html("页面加载成功");
    })
    
    图片加载完毕
    $("#img").load(function(){ 
    	$("#message2").html("图片加载成功");
    });
    
    单击双击事件
    $("#b").click(function(){ })
    $("#b").dblclick(function(){ })
    
    键盘事件
    $("#i").keydown(function(e){ });
    $("#i").keypress(function(e){ });
    $("#i").keyup(function(e){ });
    
    鼠标按下和弹起
    $("#downup").mousedown(function(){ });
    $("#downup").mouseup(function(){ });
    鼠标移动，鼠标进入（mouseover经过子元素会调用）
    $("#move").mousemove(function(){ });
    $("#enter").mouseenter(function(){ });
    $("#over").mouseover(function(){ });
    鼠标离开（mouseout经过子元素会调用）
    $("#leave1").mouseleave(function(){ });
    $("#out1").mouseout(function(){ });
    
    获得和失去焦点，文本内容改变（只有失去焦点时才会被调用）
    $("input").focus(function(){ });
    $("input").blur(function(){ });
    $("#input1").change(function(){ });
    
    表单提交事件
    $("#form").submit(function(){ });
    
    事件的另一种写法
    $("#b").on("click",function(){ });
    自动触发事件
    $("#b").trigger("dblclick");

*  Ajax

$('#comment-container').load(
        "/comments", 
        { 
        "parentComment.id" : $("[name='parentCommentId']").val(),
    	"blog.id" : $("[name='blog.id']").val(),
    	"nickname" : $("[name='nickname']").val(),
    	"email" : $("[name='email']").val(),
    	"content" : $("[name='content']").val()
        }, 
        function(responseTxt, statusTxt, xhr) { 
        	clearContent();
        }
    );

*  **JQuery元素和DOM元素的相互转换：**

JQuery元素转为DOM元素（通过get(0)或者[0]）：
    var div= $("#d");
    var d = div[0];
    
    
    DOM对象转为JQuery对象（通过$()）：
    var div= document.getElementById("d");
    var d = $(div);
    
    注：DOM对象只能调用DOM的方法或属性，JQuery元素只能调用JQuery的方法或属性，因此就有对象转换的需求。