javascript学习9、jQuery对象

jQuery中文文档

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

一、查找元素

1、常用选择器

1.1 基本选择器

$("*")                //所有元素
$("#id")             //id选择器
$(".class")          //class选择器
$("element")      //标签选择器
$(".class,p,div")  //并列选择器

1.2层级选择器

$(".outer div")    // 所有的后代
$(".outer>div")    // 所有的子代 
$(".outer+div")    // 匹配所有跟在.outer后面的div
$(".outer~div")    // .outer后面的所有div

1.3 基本筛选器

$("li:first")   // 所有li标签中第一个标签
$("li:last")    // 所有li标签中最后一个标签
$("li:even")    // 所有li标签中偶数标签
$("li:odd")     // 所有li标签中奇数标签
$("li:eq(2)")   // 所有li标签中，索引是2的那个标签
$("li:gt(1)")   // 所有li标签中，索引大于1的标签

1.4 属性选择器

$("[id='div1']")     //id属性等于div1的标签对象
$("[xxx='sb']")      //xxx属性等于sb的标签对象
$("input[type='text']") 可以缩写 $(":text")

2、常用筛选器

2.1  过滤筛选器

$("li").eq(2)      // 和$("li:eq(2)")是一样的
$("li").first()    // 和$(":first")是一样的
$("li").last()     // 和$(":last")是一样的
$("ul li").hasclass("test")   // 检测li中的是否含有某个特定的类名，有的话返回true

2.2  查找筛选器

$("div").children()    // div中的子标签,只找儿子辈  $("div").children(".div").css("color","red") 
$("div").find()        // div中的子标签,后代都找  $("form").find(:text,:password)   // form标签中找到:text,:password标签

$("div").next()        // div标签下一个标签
$("div").nextAll()     // div标签下一个同级所有标签
$("div").nextUntil()   // div标签下一个同级区间内所有标签

$("div").prev()        // div标签上一个标签
$("div").prevAll()     // div标签上一个同级所有标签
$("div").prevUntil()   // div标签上一个同级区间内所有标签

$("div").parent()      // div标签的父标签
$("div").parents()     // div标签的爷爷标签集合
$("div").parentsUntil()// div标签的爷爷标签区间内

$("input").siblings() // input的同辈标签

二、操作元素

1、属性操作

$(":text").html()                // 获取text标签的内容和dom中的innerHtml()一样
$(":text").text()                 // 获取text标签的内容和dom中的innerText()一样
$(":text").val()                  // 获取text value属性的值和dom中的.value一样
$(".test").attr("name")       // 获取test类中name属性对应的值
$(".test").attr("name","sb")  // 设置test类中name属性对应的值
$(".test").attr("checked","checked")  // 设置test类中checked属性对应的值为checked
$(":checkbox").removeAttr("checked")  // 删除checkbox标签中的checked属性
$(".test").prop("checked",true)    // 设置checked属性为true
$(".test").addClass("hide")          // 增加样式
$(".test").removeClass("hide")    // 删除样式

2、CSS操作

(样式)   css("{color:'red',backgroud:'blue'}")
(位置)   offset()    position()  scrollTop()  scrollLeft()   
(尺寸)   innerHeight()不包含边框， outerHeight()包含边框， 两个都包含padding height()不包含边框

3、文档处理

内部插入  //找到父级标签内插入,相当于插入的是children
    append()       //父级最后一个插入标签 $("#c1").append("<b>hello</b>")
    appento()      //将标签插入父级最后一个 $("p").appendTo("div")
    prepend()      //父级第一个插入标签 $("#c1").prepend("<b>hello</b>")
    prependTo()   //将标签插入父级第一个 $("p").appendTo("div")
 
外部插入 //找到父级标签外插入,相当于插入的是siblings
    before()          //父级前一个插入标签 $("#c1").before("<b>hello</b>")
    insertBefore()  //将标签插入父级前一个
    after()            //父级后一个插入标签 $("#c1").after("<b>hello</b>")
    insertAfter()    //将标签插入父级后一个
 
标签内容处理 //清空标签                  
    remove()   // 删除整个标签对象
    empty()     // 清空标签对象内的所有标签对象,但是父级标签还存在
    clone()      // 复制标签对象

4、事件

$("p").click(function(){})
$("p").bind("click",function(){})                   
$("ul").delegate("li","click",function(){})　　// 事件委托，延迟绑定事件的一种方式

 

三、jQuery循环

<script src="jquery-3.3.1"></script>
<script>
    li = [1,2,3,4,5]
    $.each(li,function(i,x){
        console.log(i,x)
    });

    //第二种
    $("table tr").each(function(this){
        $(this).addClass(".hide")
    });
</script>