黑马程序员-------JQuery

发布时间:2016-12-8 6:15:29 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"黑马程序员-------JQuery",主要涉及到黑马程序员-------JQuery方面的内容,对于黑马程序员-------JQuery感兴趣的同学可以参考一下。

---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、 <a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流! ---------------------- 一、Jquery简介 1、Jquery是什么? Jquery是功能非常强大的JavaScript类库,对JavaScript进行了封装,屏蔽了JavaScript在各个浏览器之间的差异。Jquery不仅功能强大,而且优点很多,使用Jquery简化了大量的JS代码。但是,Jquery不是代替JavaScript的,因为Jquery的实现仍然是JS代码。 Jquery的特点:开源的,免费的,简洁的,采用链式的编程方式。 2、Jquery的位置 Jquery的代码也是写在<script>标签中,如果要注册事件,就不用在网页相对应的控件上注册。 3、Jquery常用函数 1)ready() //页面dom加载后执行:可以多次注册,都会被执行。(document对象) 2)Load()//页面所有元素加载完之后执行(window对象) 3)Show()//显示元素。 4)Hide()//隐藏元素 5)Map()//Jquery内置函数,可以操作数组,返回一个新数组。 示例: <script type="text/javascript"> var num = [100,200,300];     //定义一个数组 var result = $.map(num, function (i) { return i / 5; }); //把数组中的每一个值除以5并返回 alert(result);                               //弹出结果 </script> 4、Each()//Jquery内置函数,可以操作数组,无返回值。如果函数无参数可以用this <script type="text/javascript"> var info = {"green":"绿色","red":"红色","blue":"蓝色"};  //定义一个dictionary类型的数组 $.each(info,function(k,v){alert(k+"是"+v);});  //调用Jquery提供的each()方法对数组进行处理 </script> 示例: Map()与Each()虽然都是对数组进行操作,但是针对的数组类型不同,map()是对普通的数组进行操作,并返回一个新的数组。而Each()可以针对普通数组,也可以对dictionary类型的数组进行操作。 5、html()//Jquery对象的函数既可以获得标签内部的HTML代码,还可以赋值 6、Text()//Jquery对象的函数,可以获得标签的内部文本,也可以取值和赋值 7、.css()//设定元素的css样式,如果传入两个参数,为(“属性”,“值”);形式的参数        //如果给css()传入一个参数,(“属性”)则为获取该属性的值。 8、Jquery选择器//获取控件的方法 1)ID选择器: $(“#ID名”);//不能忘记写# 2)标签选择器: $(‘标签’)来获取具有指定名的标签对象 3)样式选择器: $(“.样式名”); //不能忘记写. 4)混合选择器: $(“标签1,#Id,.样式名”);//混合了标签、ID与样式的选择器。 5)层次选择器: $(”标签 子标签”) //包含”标签“的内所有”子标签”的元素 $(“标签 >  子标签”) //只包含”标签“内的直接”子标签“ 9、Next()//获取标签的下一个相邻的同一级标签。()中可以添加条件,专门获取的指定标签 10、nextAll()//获取下一个标签下的所有同一级的元素。()中可以添加条件,专门获取的指定标签 11、Siblings()//获取标签的所有同一级的元素。 12、相对元素 13、Jquery筛选器 1):first//指定标签内的第一个元素 示例: $(“input:first”) //第一个input标签 2):Last//指定标签内的最后一个元素 示例: $(“input:last”)//最后一个input标签 3):not(选择器)//选取所有不满足”选择器“的元素 示例: <script type="text/javascript">         $(function () {             $("div:not(#div1)").click(function () {    //选择Id不是div1的div标签                 $("p", $(this)).css("background", "yellow");//被点击的层的标签的内部p标                                 });                                       //签的背景改成黄色。             });      </script> 4):even//选择器是奇数的元素 $(“p:even”); //获取p标签的奇数元素 <script type="text/javascript">         $(function () {             $("p:last").click(function () {  //选择奇数的p标签,                $(this).css("background", "yellow");当点击是背景变成黄色             });         });     </script> 5):odd//选择器是偶数的元素 示例: $(“p:odd”);//偶数的p标签 6):eq(序号)//选择器等于”序号“的元素 示例: $(“p:eq(3)) //获取序号为3的标签 7):gt(序号)//选择器小于“序号”的元素 示例: $(“p:gt(3)”)//获取序号大于3的标签 8):lt(序号)//选择器大于“序号”的元素 $(“p:lt(3)”)//获取序号小于3的标签 9):header//所有标题元素(h1...h6) 示例: $(function () {             $("h2,h3,h4:header").click(function () {  //给所有的h2,h3,h4的标题添加                 alert("xxx");                    //事件             })         }); 10):animated//正在执行动画的元素。 14、[id]属性过滤器 示例: $(function () {             $("div[id]").click(function () { //有id属性的层                 alert($(this).text());             });         }); $(function () {             $("div[id=div1]").click(function () {  //有id属性并且id=”div1”的层                 alert($(this).text());             });         }); 15、[title]属性选择器 示例: $("div[title=test2]"). //选择有title属性是test2的层                       16、[value]属性选择器 $(function () {             $("input[value=text1]").click(function () { //value属性为text1的input标签。                 alert($(this).val());             });         }); 17、(“#表单ID:enabled”)//表单属性选择器获取表单内所有可用元素 示例: $("#f1:enabled") 18、(“#表单ID:enabled”)//表单属性选择器获取表单内所有不可用元素 $("#f1:disabled") 19、(“select:selected”)//获取列表的选择项。 20、(“input:checked”)//获取复选框与单选框的选中值。 21、(“:input”)//所有表单元素包括(textarea select input button 等等) 它与(“input”)不同,这个表示的只是所有的input标签, 而(“:input”)表示的是表单要提交服务器的所有元素。 示例: $(function () {             $("input[value=btn1]").click(function () {//当点击指定的按钮时;                 $(":input").css("color", "red");    //所有表单文本的颜色变成红色             });         }); 22、(“:text”)//获取所有的单行文本框 所有的表单标签,都可以写成这个格式,就获得了所有的这个格式的元素。 23、Attr()//设置或者读取元素的属性 示例: $(function () {             $("#btn").click(function () {               //当点击id为btn的按钮是                 $(":input").attr("cols", "100");        //把所有input标签的textarea控件             });                                 //cols设置成100         }); 24、动态添加元素 1)append()//在元素中末尾追加元素 2)Prepend()//在元素中开始处追加元素 3)Before()//在元素之前追加元素 4)After()//在元素之后追加元素 示例:  <script type="text/javascript">         $(function () {             var link;             var v = 0;             $("div").css("cursor", "pointer").click(function () {                 var v2 = $(this).attr("id");                 if (v2 == "") {                     alert(v2 == "");                     link = $("<a href='...'>链接</a>");                     $(this).attr("id", v);                     v++;                     $(this).before(link);  //在选中的层之前加入超链接                 }             });         });     </script> 25、Remove()//移除元素(从父节点移除,但是还存在)返回移除的元素 26、Empty()//清空元素(删除元素,不存在) 27、replaceWith()//替换元素 28、Wrap()//将指定的元素用指定的标签包裹 示例: $(function () {             $("#btn").click(function () {  //当点击Id是btn的按钮时                 $("h1:header").wrap("<font color='blue'><b></b></font>");             });        //所有的h1标签都显示蓝色字体,并且加粗。         }); 29、样式操作 1)attr()//设置元素的属性,只有一个参数时是取值,有两个参数时,是设置值 示例: $("#p2").attr("class", "sty") //把id为p2的控件的样式设定名为sty的样式 $("#p2").attr("class")//获取Id为p2的控件的样式名称。 2)addClass()//追加样式(只有一个参数,就是样式名称) 示例: $(function () {             $("#btn1").click(function () {  //当鼠标点击Id为btn1的控件时                 $("#p1").addClass("sty2");//为id为p1的控件追加名称为sty2的样式             });         }); 3)removeClass()//移除样式(只有一个参数,为参数名称) 示例: $("#p1").removeClass("sty");//给id为p1的控件,移除样式名为sty的样式。 4)hasClass()//是否用了指定样式 示例: $("#p2").hasClass("sty");//测试id为p2的控件是否采用名称是sty的样式返回一个bool类型的值。 5)toggleClass()//样式切换器 如果存在样式就移除,如果不存在样式就添加 示例:  $("#p2").toggleClass("sty");//如果id为p2的控件,使用了名为sty的样式,就移除这个样式,如果没有使用这个样式,就添加。 30、Body特效:filter:gray//用颜色过滤 .sty     {         filter:Gray;     } 31、Bind(“事件”,”函数”)绑定事件//为某个元素绑定事件unbind()//移除绑定事件 32、Hover(“事件1”,”事件2”)//为某个元素添加事件 事件1是当鼠标进入时发生的事件 事件2是当鼠标离开时发生的事件 33、E对象 1)阻止事件冒泡:在函数中传入e参数,调用e.stopPropagation() 示例: $(function () {             $("#t3").click(function (e) { alert("t3"); e.stopPropagation(); });         }); 2)阻止默认事件:在函数中传入e参数,调用e.stopDefault() 示例: $(function () {             $("#link").click(function (e) { alert("test"); e.preventDefault(); });         }); 3)e.PageX e.PageY//获取鼠标的横纵坐标。 34、Target与this Target:是冒泡的起始元素 This:是引发事件的元素 35、One()//一次性的事件 示例:  $(function () {             $("#btn").one("click", function () { alert("test"); });//这个事件只执行一次         }); 二、Cookie Cookie是保存在浏览器端的数据。可以记录一些用户在浏览页面时的一些信息。 被记录下的信息,可能被浏览器定时清除,也可能被用户手动清除。因此,就算记录了用户浏览的一些信息,也可能会丢失。 Jquery中也对cookie做了一些封装。 $.cookie(“”,””);//以键值对的方式记录信息 $.cookie(“”);//以记录时的键名称作为取值的参数 示例: $(function () {             $("#btn").click(function () {                 //$(document).css("background-color", "red");                 $(document.body).css("backgroundColor", "red");                 $.cookie("背景色", $(document.body).css("backgroundColor"));//以键值对             });            //方式存储访问过的背景颜色         }); $(function () {             if ($.cookie("背景色")) {                 $(document.body).css("backgroundColor", $.cookie("背景色"));//以键名的             }                 方式读取cookie中的值             else {                 $(document.body).css("backgroundColor","yellow");             }         }); ---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、 <a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流! ---------------------- 

上一篇:storyboard的segue如何传递参数?
下一篇:398高校毕业设计选题

相关文章

相关评论