第二十九课：JQuery

JQuery使用

jQuery -> 函数 $ -> jQuery

<script src="Jq/jquery-1.11.0.min.js"> </script>
<script>
    $(function () {
        $("#div1").text("333");
    })

</script>

页面加载函数

JS页面加载函数, 只允许一个, 多个的话会被覆盖
JQ页面加载函数, 允许有多个, 按照从上往下顺序执行

JQuery选择器

1、基层选择器
2、层级选择器
3、基本过滤选择器
4、属性选择器
5、表单选择器

文本内容设置

innerHTML
innerText -> text()
value

$(function() {
    $("#citySelect").change(function () {
        var allCity = city[$(this).val()];
        $("#cityId").html("<option>请选择城市</option>");//刷新
        $.each(allCity,function (i,n) {
            var option = document.createElement("option");
            $(option).html(n);
            $("#cityId").append(option);
        });
    });

});

显示效果

show（）：显示
hide（）：隐藏
toggle（）：切换元素的显示状态
slideDown（）：通过使用滑动效果，显示隐藏的被选元素
slideUp（）：通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
slideToggle（）：通过使用滑动效果（高度变化）来切换元素的可见状态。
fadeIn（）:使用淡入效果来显示被选元素
fadeOut（）:使用淡出效果来隐藏被选元素
fadeToggle（）：使用淡入淡出效果来切换选中元素的

属性设置

attr(“属性名”) --> 获得属性对应的值
attr(“属性名”, “值”) --> 设置属性对应的值
– attribute 自定义属性, html不支持的属性 color
prop(“属性名”) --> 获得属性对应的值
prop(“属性名”, “值”) --> 设置属性的值
– property 固有属性, html本身支持的属性 href src checked
addClass(className) --> 添加完的class可以直接使用样式表
removeClass(className)

循环

    <script>
        $(function() {
            var arr = ["杭州","宁波",'温州','湖州','台州'];
            // jquery数组.each(callback)
            /*$("div").each(function(i) {
                console.log(i); // 循环的下标
                console.log(this); // 每一个元素 this 属于JS对象
            });*/
            // JQ的全局函数
            $.each(arr, function(i, n) {
                console.log(i); // 循环的下标
                console.log(n); // 取出来的每一个元素
            })
        })
    </script>

文档处理

append()：添加在…后面
prepend()：添加在…前面
before()：添加在…之后
after()：添加在…之前

<script>
    $(function (){
        var $op = $("<option>芒果</option>");
        // 将芒果加到梨后面
        // $("select").append($op);
        // 将芒果加到苹果前面
        // $("select").prepend($op);

        // 将芒果加到柿子后面
        // $("option:eq(1)").after($op);
        // $("option:eq(1)").before($op);
        // $op.insertBefore($("option:eq(1)"));
        // 清除所有子元素  innerHTML = "";
        $("select").empty();
    })
</script>