前端-4

jQuery

基本语法:

$(selector).action()

选择器

基本选择器
// $('*').css('color','red') 所有的元素变成红色
// $('div').css('color','red') div标签
// $('.p_class').css('color','red') p_class类
// $('#div1').css('color','red') id为div1
//$('#div1,.p_class').css('color','red') id是div1 和 class是p_class
 
层级选择器
// $("#div2 p").css("color","red") #div2 下的所有p,' '代表后代
// $("#div2>p").css("color","red") >代表儿子
// $("#div2+p").css("color","red") +毗邻    
//$("#div2~p").css("color","red") ~后边的兄弟
    
属性选择器
//属性选择器
// $('[id="div1"]').css('color','red')
// $('[alex]').css('color','red')

表单选择器
// $('[type="button"]').css('width','300')
// $(":button").css('width','300')这种写法只适用于input标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">div1</div>
<p class="p_class">p</p>


<div id="div2">
    <p>hello p2</p>
    <div>
        <p>
            hello p3
        </p>
    </div>

</div>
<p>hello p4</p>
<p>hello p5</p>
<p>hello p6</p>
<div id="div3">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>

</div>
<script src="jquery-3.2.1.js"></script>
<p alex="haha">pp</p>
<p alex="hehe">pp</p>
<input type="text">
<input type="button">
<script>
    //基本选择器
    // $('*').css('color','red') 所有的元素变成红色
    // $('div').css('color','red') div标签
    // $('.p_class').css('color','red') p_class类
    // $('#div1').css('color','red') id为div1
    // $('#div1,.p_class').css('color','red') id是div1 和 class是p_class

    //层级选择器
    // $("#div2 p").css("color","red") #div2 下的所有p,' '代表后代
    // $("#div2>p").css("color","red") >代表儿子
    // $("#div2+p").css("color","red") +毗邻
    // $("#div2~p").css("color","red") ~后边的兄弟

    //筛选器
    // $('li:eq(2)').css("color","red") 选择第二个li
    // $('li:even').css("color","red") 奇数行
    // $('li:gt(1)').css("color","red") 行数大于一
    // $('li:last').css("color","red")

    //属性选择器
    // $('[id="div1"]').css('color','red')
    // $('[alex]').css('color','red')
    // $('[type="button"]').css('width','300')
    // $(":button").css('width','300')这种写法只适用于input标签
    console.log($('#div1').html())
</script>
</body>
</html>

筛选器

过滤筛选器
$('li').eq(2).css('color','red')
查找筛选器

function show(self){
    $(self).next().remoeClass("hide");
    $(self).parent().siblings().children(".com").addClass("hide")
}

jQuery

推荐阅读更多精彩内容