jQuery笔记2

元素的遍历

jQuery代码块
 $(function () {
            //  获取所有的span
            //  控制台输出每个span的itany属性的值 jquery对象.attr("itany")
            let spans = $("span");
            // 方式1
            // for(let i = 0 ; i < spans.length ; i++)
            // {
            //  let value = $(spans[i]).attr("itany");
            //  console.log(value);
            // }

            // 方式2
            // for(let i = 0 ; i < spans.length ; i++)
            // {
            //  let value = spans.eq(i).attr("itany");
            //  console.log(value);
            // }

            // 方式3
            // spans.each(function(){
            //  // 对于每个元素，都会执行该方法
            //  // $(this) 是每次循环的元素的jquery对象
            //  console.log($(this).attr("itany"));
            //  $(this).css("color","red");
            // });


            // 注意，如果对于Jquery对象数组中的所有元素进行相同的操作，可以不用遍历
            $("span").css("color","green");
        })

html代码块：
<span itany="11">1</span>
    <label for="">a</label>
    <span itany="22">2</span>
    <h1>b</h1>
    <span itany="33">3</span>
    <span itany="44">5</span>
    <div>c</div>

访问属性

DOM属性
$().prop(“属性名”) 取值操作
$().prop(“属性名”,“属性值”) 赋值操作
HTML属性
$().attr(“属性名”) 取值操作
$().attr(“属性名”,“属性值”) 赋值操作

jQuery代码块：
 function select(flag)
        {
            $(":checkbox").prop("checked",flag);
        }

html代码块：
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">

    <button οnclick="select(true)">全选</button>
    <button οnclick="select(false)">全不选</button>

访问样式

addClass(“样式名”) 添加样式
removeClass(“样式名”) 删除样式
removeClass() 删除所有样式
toggleClass(“样式名”) 有则删除，没有则添加

css代码块：
   .content{
            width: 80%;
            margin:auto;
            padding:20px;
        }

        .header{
            width: 100%;
            height: 40px;
            border:1px solid black;
        }

        .container{
            width: 100%;
            height: 440px;
            border:1px solid black;
        }
        .header i{
            border:1px solid black;
            border-radius:50%;
            float: right;
            font-size:20px;
            margin-top: 10px;
            vertical-align:center;
        }
        .hide{
            display:none;

jQuery代码块
     function doChange()
        {
             $(".container").toggleClass("hide");
             $("i").toggleClass('icon-down');
        }

html代码块：
<div class="content">
        <div class="header">
            <i class="iconfont icon-up" οnclick="doChange()"></i>
        </div>
        <div class="container">
            content..............
        </div>
    </div>

访问css
$().css(“样式名”) 取值操作 ( 原始css样式 background-color )
$().css(“样式名”,“样式值”) 赋值操作
$().css({}) 一次性修改多个css样式 参数是json对象，对象属性名是css属性名，对象值是css属性值
$().width() 、 $().height() 无参取值，有参赋值

访问内容

$().html() 无参取值，有参赋值，注意：取值取标签，赋值解析标签
$().text() 无参取值，有参赋值，注意：取值不取标签，赋值不解析标签
$().val() 无参取值，有参赋值，相当于表单组件的value

jQuery代码块：
   function doChange()
        {
            let val = $("#source").val();
            $("#target").text( val );
            let arr = ["red","green","blue"];
            let color = arr[parseInt(val.length / 5)];
            if(color)
            {
                $("#target").css("color", arr[parseInt(val.length / 5)] )
            }
        }

html代码块：
<input type="text" id="source" οnkeyup="doChange()">
    <h1 id="target">111</h1>