黑马程序员技术交流社区

标题: 【石家庄校区】笔记 [打印本页]
作者: 庞帅    时间: 2018-5-9 16:26
标题: 【石家庄校区】笔记
本帖最后由 庞帅 于 2018-5-9 16:28 编辑

JQuery
是JS的框架（JS的类库）。对传统的JS进行了封装
Js常用框架：
jQuery，Extjs,DWR,prototype...
$相当于JQuery
效率比window.onload高
JQ的使用：
语法：
Ø 引入Jquery的js文件.
<script src="../../js/jquery-1.11.3.min.js"></script>
Ø JQuery的入口函数:
                        // 传统的JS的方式：页面加载的事件只能执行一次.
                        /*window.onload = function(){
                                alert("aaa");
                        }
                        
                        window.onload = function(){
                                alert("bbb");
                        }*/
                        
                        // JQuery的方式：
//$（）相当于页面加载的事件,可以执行多次.效率比window.onload要高.
                        // window.onload 等页面加载完成后执行该方法.
                        // $(function(){}):等页面的DOM树绘制完成后进行执行.
                        // $相当于JQuery
                        $(function(){
                                alert("aaa");
                        });
                ||
                ||
//也是入口函数
                        /*$(document).ready(function(){
                                alert("aaa");
                        });*/
                        $(function(){
                                alert("bbb");
                        });
JS对象和JQ对象的转换：
                        window.onload = function(){
                                // 传统JS方式：
                                var d1 = document.getElementById("d1");
                                // JS对象的属性和方法:
                                // d1.innerHTML = "JS对象的属性";
                                // d1.html("aaaaaa");
                                // 将JS对象转成JQ的对象.
                                $(d1).html("JS对象转成JQ对象");
                        }
             $(function(){
                                var $d1 = $("#d1");
                                // $d1.html("JQ对象的属性");
                                // 转成JS的对象:
                                // 一种方式
                                // $d1[0].innerHTML = "将JQ的对象转成JS对象";
                                // 二种方式:
                                $d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
                        });
JQ显示和隐藏：
JQ的效果操作:
Ø * show();
    * 使用一:Jq对象.show();
    * 使用二:Jq对象.show(“slow”); // slow,normal,fast
    * 使用三:Jq对象.show(毫秒值); // 1000
    * 使用四:Jq对象.show(毫秒值,function(){});
Ø * hide();
    * 使用一:Jq对象.hide();
    * 使用二:Jq对象.hide(“slow”); // slow,normal,fast
    * 使用三:Jq对象.hide(毫秒值); // 1000
    * 使用四:Jq对象.hide(毫秒值,function(){});
Ø * slideDown();--向下滑动
    * 使用一:Jq对象.slideDown();
    * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
    * 使用三:Jq对象.slideDown(毫秒值); // 1000
    * 使用四:Jq对象.slideDown(毫秒值,function(){});
Ø * slideUp();--向上滑动
    * 使用一:Jq对象.slideUp();
    * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
    * 使用三:Jq对象.slideUp(毫秒值); // 1000
    * 使用四:Jq对象.slideUp(毫秒值,function(){});
Ø * fadeIn();--淡入
    * 使用一:Jq对象.fadeIn();
    * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
    * 使用三:Jq对象.fadeIn(毫秒值); // 1000
    * 使用四:Jq对象.fadeIn(毫秒值,function(){});
Ø * fadeOut();--淡出
    * 使用一:Jq对象.fadeOut();
    * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
    * 使用三:Jq对象.fadeOut(毫秒值); // 1000
    * 使用四:Jq对象.fadeOut(毫秒值,function(){});
toggle();        --单击切换函数（用于绑定两个或多个处理器函数，用来响应onclick）
JQuery的选择器：
Ø id选择器：
* 用法:$(“#id”)
Ø 类选择器：
* 用法:$(“.类名”)
Ø 元素选择器：
* 用法:$(“元素名称”)
Ø 通配符选择器：
* 用法:$(“*”)
Ø 并列选择器：
* 用法:$(“选择器,选择器,选择器”)
                        $(function(){
                                $("#but1").click(function(){
                                        // alert("aaaa");
                                        $("#one").css("background","#bbffaa");
                                });
                                
                             $("#but2").click(function(){
                                        $(".mini").css("background","#bbffaa");
                                });
                                
                                $("#but3").click(function(){
                                        $("div").css("background","#bbffaa");
                                });
                                
                                $("#but4").click(function(){
                                        $("*").css("background","#bbffaa");
                                });
                                
                                $("#but5").click(function(){
                                  $("#two,span,.mini").css("background","#bbffaa");
                                });
                        });
层级选择器：
Ø 后代选择器：使用空格所有后代包含孙子及以下的元素
Ø 子元素选择器：使用>第一层的元素（儿子）
Ø 下一个元素:使用+下一个同辈元素
Ø 兄弟元素:使用~后面所有的同辈元素
                <script>
                        $(function(){
                                // 后代选择器:
                                $("#but1").click(function(){
                                        $("body div").css("background","#bbffaa");
                                });
                                
                                // body下的第一层div元素
                                $("#but2").click(function(){
                                        $("body > div").css("background","#bbffaa");
                                });
                                
                                // 查找下一个同辈的元素
                                $("#but3").click(function(){
                                        $("#three + div").css("background","#bbffaa");
                                });
                                
                                $("#but4").click(function(){
                                        $("#two ~ div").css("background","#bbffaa");
                                });
                                
                        });
                        
                </script>
基本过滤选择器：
Odd:奇数行
Even:偶数行
：get(index)

<script>
$(function(){
$("#but1").click(function(){
  $("#threediv:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#threediv:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
  $("div:even").css("background","#bbffaa");
});
//获取第n个元素
$("#but5").click(function(){
$("#threediv:eq(1)").css("background","#bbffaa");
});
});

</script>

内容选择器：
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});

        </script>
属性选择器：
Attribute
Attribute=value
例：Div[title = ‘aaa’]
表单选择器：不常用
                <script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
//属性选择器
                        $("input[type='text']").css("background","#bbffaa");
});
});

</script>

：表单属性选择器不常用
{Checked:
Selected:}较常用

JQuery改变页面样式方法：
Css
addClass

JQuery改变页面属性：
attr() ：设置或返回被选元素的属性值。
removeAttr() ：从每一个匹配的元素中删除一个属性
prop() ：获取在匹配的元素集中的第一个元素的属性值。
removeProp() ：用来删除由.prop()方法设置的属性集

HTML代码/文本/值：
html([val|fn]):取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。  
text([val|fn]):取得所有匹配元素的内容。
val([val|fn|arr]):获得匹配元素的当前值。
事件：
Ø 事件切换：
Hover：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法
toggle()：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click 事件。


Ø 事件处理：
on():在选择元素上绑定一个或多个事件的事件处理函数。
bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
$('#foo').bind(click dblclick, function() {
  ......
});

Ø 委托事件：
Delegate():指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，                        并规定当这些事件发生时运行的函数。
undelegate()：删除由 delegate()方法添加的一个或多个事件处理程序。






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2