A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-8-10 16:24 编辑

『黑马程序员济南』JavaEE就业笔记串讲--JQuery


JQuery的概述
什么是JQuery:
  JQuery是一个JS的框架(JS的类库).对传统的JS进行了封装.现在企业的开发中往往不会使用传统的JS进行开发,通常都会使用JS框架进行开发.
JS的常用的框架:
  JQuery,ExtJS,DWR,Prototype..

JQuery的入门
引入Jquery的js文件.
  
[HTML] 纯文本查看 复制代码
<script src="../../js/jquery-1.11.3.min.js"></script>

JQuery的入口函数:
                        
[HTML] 纯文本查看 复制代码
// 传统的JS的方式:页面加载的事件只能执行一次.
                        /*window.onload = function(){
                                alert("aaa");
                        }
                        
                        window.onload = function(){
                                alert("bbb");
                        }*/
                        
                        // JQuery的方式:相当于页面加载的事件,可以执行多次.效率比window.onload要高.
                        // window.onload 等页面加载完成后执行该方法.
                        // $(function(){}):等页面的DOM树绘制完成后进行执行.
                        // $相当于JQuery
                        $(function(){
                                alert("aaa");
                        });
                        
                        $(function(){
                                alert("bbb");
                        });
JS对象和JQ对象的转换
                        
[HTML] 纯文本查看 复制代码
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的效果操作:
* 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(){});
* animate();        --自定义动画
* toggle();                --单击切换函数
    * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

JQuery的选择器:
基本选择器
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
                        
[HTML] 纯文本查看 复制代码
$(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");
                                });
                        });
层级选择器:
后代选择器:使用空格        所有后代包含孙子及以下的元素
子元素选择器:使用>        第一层的元素(儿子)
下一个元素:使用+                下一个同辈元素
兄弟元素:使用~                后面所有的同辈元素
               
[JavaScript] 纯文本查看 复制代码
<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>
基本过滤选择器
               
[JavaScript] 纯文本查看 复制代码
<script>
                        $(function(){
                                $("#but1").click(function(){
                                        $("#three div:first").css("background","#bbffaa");
                                });
                                $("#but2").click(function(){
                                        $("#three div:last").css("background","#bbffaa");
                                });
                                $("#but3").click(function(){
                                        $("div:odd").css("background","#bbffaa");
                                });
                                $("#but4").click(function(){
                                        $("div:even").css("background","#bbffaa");
                                });
                                $("#but5").click(function(){
                                        $("#three div:eq(1)").css("background","#bbffaa");
                                });
                        });
                        
                </script>
内容选择器
               
[JavaScript] 纯文本查看 复制代码
<script>
                        $(function(){
                                $("#but1").click(function(){
                                        $("div:contains('1')").css("background","#bbffaa");
                                });
                        });
                        
                </script>
表单选择器
               
[JavaScript] 纯文本查看 复制代码
<script>
                        $(function(){
                                $("#but1").click(function(){
                                        $(":input").css("background","#bbffaa");
                                });
                                $("#but2").click(function(){
                                        // $(":text").css("background","#bbffaa");
                                        $("input[type='text']").css("background","#bbffaa");
                                });
                        });
                        
                </script>
JQuery中添加和移除样式
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法:
    * addClass();
    * removeClass();
JQuery对属性的操作的方法
* attr();
    * 使用方法一:$(“”).attr(“src”);
    * 使用方法二:$(“”).attr(“src”,”test.jpg”);
    * 使用方法三:$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
    * 使用方法一:$(“”).prop(“src”);
    * 使用方法二:$(“”).prop(“src”,”test.jpg”);
    * 使用方法三:$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();

JQuery的DOM操作
* 常用的方法:
    * append();                        ---在某个元素后添加内容.        
    * appendTO();                ---将某个元素添加到另一个元素后.
    * remove();                        ---将某个元素移除.
JQuery的遍历
遍历的方式一:
[JavaScript] 纯文本查看 复制代码
$.each(objects,function(i,n){
    
});

遍历的方式二:
[JavaScript] 纯文本查看 复制代码
$(“”).each(function(i,n){

});



                        
[JavaScript] 纯文本查看 复制代码
$(function(){
                                var arrs = new Array("张森","张凤","张芙蓉");
                                // 将这个数组转成JQ的对象使用each方法.
                                /*$(arrs).each(function(i,n){
                                        alert(i+"   "+n);
                                });*/
                                
                                $.each(arrs,function(i,n){
                                        alert(i+"   "+n);
                                });
                        });


JQuery常用事件:
11.png
JQ的事件切换:
* toggle();                --单击事件的切换
* hover();                --鼠标悬停的切换


4 个回复

倒序浏览

回帖奖励 +1

感谢分享!{:8_488:}
回复 使用道具 举报

回帖奖励 +1

回复 使用道具 举报

回帖奖励 +1

感谢分享
回复 使用道具 举报
马上学了,先预习一下
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马