[JavaScript知识库]jQuery3

1.attr方法
作用：获取或者设置属性节点的值。可以传递一个参数，也可以传递两个参数。
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值
注意：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值（传递一个参数）
注意：如果传递两个参数，那么找到的元素都会被设置。设置不存在的属性节点的话，系统自动新增。

		// Html部分
		<span class="span1" name="it6666"></span>
    	<span class="span2" name= "ljz"></span>
    	
    	// JS部分
		$(function(){
            var a = $("span").attr("class");          // 只会返回span1
            console.log(a)
        })
        $(function(){
            var a = $("span").attr("class","box");    // 两个span的class值都被改为box
            console.log(a)
        })

2.removeAttr()方法 删除属性节点
会删除所有找到元素的指定的属性节点

		$(function(){
            var a = $("span").removeAttr("class");         // 删除所有span的class属性节点
            console.log(a)
        })
        $(function(){
            var a = $("span").removeAttr("class name");    // 删除所有span的class和name属性节点
            console.log(a)
        })

3.prop方法 特点与attr方法一致
注意：prop方法不仅能操作属性，它还能操作属性节点

		// Html部分
		<span class="span1" name="it6666"></span>
	    <span class="span2" name= "ljz"></span>
	    <input type ="checkbox" checked>
	    
		// JS部分
		$(function(){
            var a = $("span").eq(0).prop("demo","it666")        // eq(0)会找到所有span元素中的第一个,新增demo属性节点，赋值为it666。不加eq(0)的话所有span都会被加上demo属性节点。
            $("span").prop("class","box")                       // 所有span元素的class都设置成box
        });
        $(function(){
            var a = $("span").prop("class")                     // 也是找到所有span元素的第一个
            console.log(a)
        });
        //官方推荐在操作属性节点时，具有(true和false属性的属性节点就用prop(checked,selected,disabled)，其他就是用attr())
        $(function(){
            console.log($("input").prop("checked"));           // 输出true    如果没有checked这个属性节点，返回false
            console.log($("input").attr("checked"))            // 输出checked    如果没有checked这个属性节点，返回undefined
        });

4.removeProp方法

		$(function(){
            var a = $("span").removeProp("class")      // class属性节点还在，值undefined了
            console.log(a)
        });
 
        $(function(){
            var a = $("span").attr("class","box");    // 两个span的class值都被改为box
            console.log(a)
        })

5.图片切换

		// Html部分
		<div>
	        <input type="text">
	        <button>切换</button>
	    </div>
	    <br>
	    <img src = "C:\Users\21170\Pictures\商品图片\饼干.png">
	    
	    // JS部分
		$(function(){
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function(){
                var input = document.getElementsByTagName("input")[0]
                var text = input.value;
                $("img").attr("src",text)
            }
        })

6.jQuery类操作
1.addClass(),作用是添加类，如果要添加多个，多个类名之间用空格隔开。 attr和prop会覆盖class属性，而addClass不会覆盖class属性。

		// Html部分
		<button>添加类</button>
	    <button>删除类</button>
	    <button>切换类</button>
	    <div></div>
	    
		// CSS部分
		*{
            margin: 0;
            padding: 0;
        }
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            border: 10px solid #000;
        }
        
        //JS部分
		$(function(){
            var btn = document.getElementsByTagName("button")
            btn[0].onclick = function(){
                $("div").addClass("class1 class2")    // 添加类
            }
            btn[1].onclick = function(){
                $("div").removeClass("class1 class2")   // 删除类
            }
            btn[2].onclick = function(){
                $("div").toggleClass("class2 class1")   // 切换类
            }
        })