MyException - 我的异常网
当前位置:我的异常网» jQuery » JQuery的学习内容小结. 学习手册

JQuery的学习内容小结. 学习手册

www.MyException.Cn  网友分享于:2018-03-30  浏览:1次
JQuery的学习内容总结. 学习手册
JQuery的查询手册 :

一, JQuery的用法

   1. 首先要下载Jquery的js文件,并在需要使用JQuery的html文件的<head>标签加载该js文件 :

        <script type="text/javascript" src="js/jquery.js"></script>

        并在下一行输入JQuery代码 : <script>JQuery代码 </script>

    2. JQuery代码都要从如下代码开始 :

        完整写法 : $(document).ready(function(){ JQuery代码 })

        简略写法 : $(function(){ JQuery代码 })

    3. JQuery代码中 "$" 符号的四种应用

        (1) $(function(){}) : JQuery代码的开始

        (2) $(selector) : 在html中查找标签和属性(JQuery选择器)

        (3) $(dom element) : 将javascript中通过documentElementById()方法得到的DOM对象转换成JQuery对象,

                                        这样才能继续使用JQuery的各种方法

        (4) $(html) : 将html转换成JQuery对象.  例: $("<p>i love you</p>")

    4. JQuery中最重要的用法 , $(selector).action() : 给查找到的html元素添加事件 .

        (1) 其中的 selector 选择器包括以下四大类内容 :

            ①基本选择器 :

                a. 标签选择器("div"): 选择所有的div标签

                b. id选择器("#123"): 选择属性中 id的值等于123的标签

                c. class选择器(".123"): 选择属性中 class的值等于123的标签

                d. 并集选择器("p,div"): 选择所有的p标签和div标签

                e. 交集选择器("div.123") : 选择标签的class属性等于123的div标签, 

                f.  全局选择器("*"), 选择所有的标签

            ②层次选择器 :

                a. 后代选择器("ul li"): 选择ul下的所有li (包括指定标签下的所有标签,包括儿子和孙子等等)

                b. 子选择器("ul>li"): 选择ul标签的儿子标签li(只包括指定标签的儿子层,不包括孙子等)

                c. 相邻选择器("ul+p"): 选择ul标签其后的相邻的同辈p标签(必须是其后并紧挨相邻的同辈标签)

                d. 同辈选择器("ul~p"): 选择ul标签其后的所有同辈p标签(ul后面的所有同辈的p标签)

            ③属性选择器 ([ ]) :

                a. 选取含有该属性的标签("div[id]"): 选取包含id属性的div标签

                b. 选取属性值等于给定值的标签("div[id='123']"): 选取属性值等于123的div标签

                c. 选取属性值不等于给定值的标签("div[id!='123']"): 选取属性值不等于123的div标签

                d. 选取属性值以给定值开头的标签("div[id^='123']"): 选取属性值以123开头的div标签

                e. 选取属性值以给定值结尾的标签("div[id$='123']"): 选取属性值以123结尾的div标签

                f. 选取属性值包含给定值的标签("div[id*='123']"):选取属性值包含123的div标签

                g. 选取多个属性都符合给定值的标签("div[id][class='123']"): 选取包含id属性并且class属性等于123的div标签

            ④过滤选择器 ( : ) :

                a. 选取选择的第一个标签("ul li:first"): 选取ul下的第一个li标签

                b. 选取选择的最后一个标签("ul li:last"): 选取ul下的最后一个li标签

                c. 选取选择的奇数标签("ul li:odd"): 选取ul下的所有奇数li标签(标签从零开始,所以第一个标签是偶数)

               d. 选取选择的奇数标签("ul li:even"): 选取ul下的所有偶数li标签(标签从零开始,所以第一个标签是偶数)

                e: 反选标签("p:not(.a)"): 选取class属性为a的p标签以外的其余p标签

                f: 标题标签(":header"): 选取所有的h1--h6的标题标签

                g: 选取获得焦点的标签("input:focus"): 选取获得焦点的所有input标签

                h: 选取索引等于给定值的标签("ul li:eq(0)"): 选取ul标签下的索引为0的li标签,即第一个li标签

                i: 选取索引大于给定值的标签("ul li:gt(1)"): 选取ul标签下的索引大于1的li标签, 即从第三个以后的li标签

                j: 选取索引小于给定值的标签("ul li:lt(2)"): 选取ul标签下的索引小于1的li标签, 即前两个li标签

                k: 选取所有的隐藏标签(":hidden"): 选取所有的隐藏的标签 (即type="hidden")

                l: 选取所有的可见的元素(":visible"): 选取所有可见的元素 (即没有type="hidden")

        (2)action中包含的内容

            ①. 鼠标事件

                a. click(): 鼠标的点击事件

                b. mouseover(): 鼠标的滑过事件

                c. mouseout(): 鼠标的离开事件

                d. hover(): mouseover和mouseout的复合事件, 这时会有两个function(){}参数

             ②.键盘事件

                a. keypress(): 会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

                b. keydown(): 键盘按下时触发. (keyCode==13时代表按下 Enter 键)

                    例: $(document).keydown(function(event){
                                //判断当event.keyCode 为37时(即左方面键),执行函数to_left();
                                //判断当event.keyCode 为39时(即右方面键),执行函数to_right();
                                if(event.keyCode == 37){
                                    to_left();
                                }else if (event.keyCode == 39){
                                    to_right();
                                }

                          });

                c. keyup(): 键盘释放时触发

            ③.动画事件

                a. show(), hide() : 参数是响应事件, 毫秒为单位

                b. toogle(): 复合事件, show和hide的复合事件

                b. fadein(), fadeout(): 参数是响应事件, 毫秒为单位

                c. slidedown(), slideup(): 参数是响应事件, 毫秒为单位

            ④. DOM操作

                a. val(), val("") : 不带参数表示获取标签的value属性值, 带参数表示设置该值

                b. text(), text("") : 设置或获取被选元素的文本内容(innerText)

                c. html(), html("") : 返回或设置被选元素的内容(innerHTML)

                d. css(""), css("", "") : 返回或者设置元素的样式

                e. addClass(""), removeClass(""), toogleClass("") : 添加样式; 移除样式; 复合操作(添加或移除)

               f. append(), appendTo(), prepend(), prependTo() : 在被选元素的结尾(仍然在内部)插入指定内容(append,appendTo); 在被选元素的开头(仍然在内部)插入指定内容(prepend, prependTo); 带To和不带To的区别: 如果是A append B 和 A appendTo B, 前者是B插入A内部的尾部, 后者是A插入B内部的尾部.

                g. after(), insertafter(), before(), insertbefore() : A insertafter B 表示将A插入到B(selector)之后; A after B 表示将B插入A(selector)之后

                h. replaceWith(), replaceAll() : A(selector) replaceWith B, B替换A; A replaceAll B(selector), A替换B

                i. clone() : 生成被选元素的副本, 包括子节点, 文本和属性. 参数为boolean, 意思是是否复制事件

                j. attr(""), attr("", "") : 获取或者设置属性的值.

                k. empty() : 将指定元素中的所有内容全部清除,包括文本和子元素

               l. remove(), detach() : 都是删除指定元素, 删除之后开可以还原. 还原的内容不同: remove()只能还原元素本身,不能还原JQuery数据,事件和附加的数据等; detach()不但可以还原标签,还可以还原事件和附加的数据等

                 m. childern() : 只能查找儿子元素

                n. find() : 能查找所有的后代元素

                o. next(), nextAll(), nextUtil(4) : 同辈元素的查找, 下一个, 后面的所有, 后面直到第4个.

                p. prev(), prevAll(), prevUtil(4) : 同辈元素的查找, 上一个, 前面的所有, 前面直到第4个.

                q. parent() : 只能查找父亲节点

                r. parents() : 查找所有的前辈节点

    5.使用JQuery完成异步请求 :

        (1) 书写形式 : $.ajax({ 参数 })

        (2) 详细描述 : $.ajax({ 参数 })是JQuery提供的一个函数,这个函数实现了对ajax的请求,并且帮助开发者完成了具体细节的工作, 比如浏览器的兼容性, post请求头部的设置等. 开发者只需要把所有的参数组装成一个对象当做这个函数的一个参数传入即可.

        (3) 参数 :

            a. type : get 或者 post

            b. url : 请求链接地址

            c. async : 是否异步

            d. success(function(data){}) : 请求成功后服务器给客户端传递的数据, 通过data变量传递.

            e. error : 出错后的处理方式

            f. data : post请求的时候才有, 是浏览器给服务器传递的参数

            g. beforesend : 发出请求之前执行的内容

            h. complete : 完成请求之后执行的内容

        (4)注意 : 若发生ajax请求的资源和url指向的网络资源不再同一个服务器中, 直接访问, 请求能够到达,但是服务器的安全机制造成会在客户端报错,无法正常获取数据, 我们需要的服务器端设置两个响应头:

                response.setHeader("Access-Control-Allow-Origin", "*"); 表示其他域下的ajax请求都能访问本服务器

                response.setHeader("Access-Control-Allow-Methods", "POST, GET"); 允许的请求方式

文章评论

程序员和编码员之间的区别
程序员和编码员之间的区别
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
如何成为一名黑客
如何成为一名黑客
中美印日四国程序员比较
中美印日四国程序员比较
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的鄙视链
程序员的鄙视链
旅行,写作,编程
旅行,写作,编程
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
每天工作4小时的程序员
每天工作4小时的程序员
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
代码女神横空出世
代码女神横空出世
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员必看的十大电影
程序员必看的十大电影
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
老程序员的下场
老程序员的下场
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
编程语言是女人
编程语言是女人
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
我是如何打败拖延症的
我是如何打败拖延症的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
鲜为人知的编程真相
鲜为人知的编程真相
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
那些争议最大的编程观点
那些争议最大的编程观点
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员都该阅读的书
程序员都该阅读的书
10个调试和排错的小建议
10个调试和排错的小建议
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
 程序员的样子
程序员的样子
一个程序员的时间管理
一个程序员的时间管理
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有