JavaScript、jQuery杂记

1.js 获取元素(父节点,子节点,兄弟节点)

var test = document.getElementById("test");
　　var parent = test.parentNode; // 父节点
　　var chils = test.childNodes; // 全部子节点
　　var first = test.firstChild; // 第一个子节点
　　var last = test.lastChile; // 最后一个子节点　
　　var previous = test.previousSibling; // 上一个兄弟节点
　　var next = test.nextSibling; // 下一个兄弟节点

2.jq链式语法优点和加载函数

节约JS代码;所返回的都是同一个对象,可以提高代码的效率.(jquery的设计哲学是Write less, do more)

$(document).ready(function(){});
$(function(){
    console.log();
})
(两个函数的效果等同)


<script src="./js/login.js"></script>    放在</body>之前
在构建完DOM树后自动执行

3.一些常用方法

.attr()        //方法设置或返回被选元素的属性值    $("img").attr("width","180");
.addClass("")    //向被选元素添加一个或多个类
.removeClass("")    //从被选元素移除一个或多个类
.append()            //在被选元素的结尾插入指定内容
.html()            //返回或设置被选元素的内容
事件
.click()            //单击
.mouseenter()        //鼠标指针进入（穿过）元素时
.mouseleave()                    //鼠标指针离开元素
.mousedown()        //鼠标指针移动到元素上方，并按下鼠标按键
.mouseup()            //在元素上放松鼠标按钮
.focus()            //元素获得焦点
.change()            //元素的值发生改变
动画
.hide()               //hide() 方法隐藏被选元素
.show()               //显示隐藏的被选元素

4.ul调用某一列

$(".payment li").eq(1).on("click", function(){})

5.前后台交互时

alert(data);     显示为Object  已经取到数据
var b = JSON.stringify(data);		//把Object对象显示为字符串

6.jquery 获取元素(父节点,子节点,兄弟节点)

 $("#test1").parent(); // 父节点
    $("#test1").parents(); // 全部父节点
    $("#test1").parents(".mui-content");
    $("#test").children(); // 全部子节点
    $("#test").children("#test1");
    $("#test").contents(); // 返回#test里面的所有内容，包括节点和文本
    $("#test").contents("#test1");
    $("#test1").prev();  // 上一个兄弟节点
    $("#test1").prevAll(); // 之前所有兄弟节点
    $("#test1").next(); // 下一个兄弟节点
    $("#test1").nextAll(); // 之后所有兄弟节点
    $("#test1").siblings(); // 所有兄弟节点
    $("#test1").siblings("#test2");
    $("#test").find("#test1");

举个小栗子

$(".name1").parent().parent().children().children(".name3").val()

7.列表元素筛选

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
    $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
    $("ul li").first(); // 选取ul li中匹配的第一个元素
    $("ul li").last(); // 选取ul li中匹配的最后一个元素
    $("ul li").slice(1, 4); // 选取第2 ~ 4个元素
    $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素

8.jQuery 层次选择器

$("div span") 选取<div>里的所有<span>元素

$("div >span") 选取<div>元素下元素名是<span>的子元素

$("#one +div") 选取id为one的元素的下一个<div>同辈元素    等同于$(#one).next("div")

$("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素    等同于$(#one).nextAll("div")

$(#one).siblings("div") 获取id为one的元素的所有<div>同辈元素（不管前后）

$(#one).prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：

$(#one).siblings("div")>$("#one~div")>$("#one +div")  或是

$(#one).siblings("div")>$(#one).nextAll("div")>$(#one).next("div")