一起来学jquery!

Posted 2020-09-16

jquery学习之旅!

 

------------jquery书写步骤

------------jquery事件与函数

------------jquery修改css属性

------------jquery修改html属性

------------jquery核心:选择器

------------jquery的ajax使用

 

　　前言：jquery是一个快速、简洁的javascript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jquery可以兼容各种主流浏览器:如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+、FirefoX 2．0+、Chrome 8+等。总而言之:jquery内容丰富、简单易学，学好jquery，定将使你的web开发如鱼得水！下面直接步入正题:

 

 

(一)jquery书写步骤

        1，引入jquery文件

　　　　在官网下载好jquery文件后，在script中引入jquery文件:

　　　　　　　　<script src="jquery.js"></script>　　

　　　　　　　　//注意:src后的路径为相对路径，根据jquery存放位置的不同而改变
        2，新建script标签来写jquery

　　　　<script src="jquery.js"></script>

　　　　<script>　jquery代码书写区　</script>
        3，用jquery代码分离
        4，按照jquery原则书写代码

　　　　①$(document).ready(fn)　　//$(document)是将dom对象转换为jquery对象

　　　　②$(function(){})　　//是对上一种方法的封装（常用方法）

　　　　③$().ready(fn)     //这种方法内部没有dom对象的组成部分

                1)这里注意与js区别:
                    ①在js中,window.onload=fn 是在把页面上dom和资源加载完成之后执行，
                       而jquery是在页面dom加载之后即执行                   

　　　　　　　②在同一个请求中，jquery加载事件可以设置多个，而传统js加载方式只能设置一个，若多的话，后者覆盖前者
                       原因:传统加载方式是给onload事件属性赋值，jquery加载方式是遍历数组里的元素

　　　　　　2)js对象与jquery对象的转换:

           ①将jquery对象变为dom对象:
                $(\'div\').style.backgroundColor = "red";        //失败
                $(\'div\')[0].style.backgroundColor = "red";    //成功　　$(\'div\')[下标]  的形式

　　　　②将dom对象变为jquery对象:
                var dom对象 = document.getElementsByTagName(\'div\')[0];
                dom对象.css();        //失败
                $(dom对象).css();    //成功　　$(dom对象)  的形式

 

（二）jquery事件与函数

 

1，事件:就是什么时候执行什么事　　

　　1)事件示例：

①click:单击事件; 　　dblclick:双击事件

②mouseover:鼠标移动上去事件

③mouseout:鼠标离开事件

④focus:获得焦点事件;  　　blur:失去焦点事件

⑤mousedown/up/move 鼠标按下，抬起，移动

⑥change:发生改变事件

⑦hover:用法:$("div").hover(function(){},function(){});
                //这个事件对应鼠标放上和鼠标离开两个事件

2)事件的绑定与解绑:

    事件绑定:

　　　①单个事件绑定:$("div").bind("事件",function(){});

　　　②多个对象绑定多个事件:$("div").bind({"事件":function(){},"事件":function(){}});

　　　③一个对象绑定多个事件:$(\'div\').bind(\'事件1 事件2 事件3\',function(){...});

　　　　注意事件与函数之间符号的区别:

　　　　　　①单个事件绑定用的是 ","

　　　　　　②多个对象绑定多个事件: 对象与函数之间用的是 ":"; 多个对象之间用的是 ","

　　　　　　③一个对象绑定多个事件: 事件用一个 空格 隔开;  事件与函数之间用 "," 隔开

　　解除绑定:

　　　unbind("action") 　　//action为事件参数，如果不写参数，则全部解除绑定

　　　解绑示例:$("div").unbind("action");

2，函数:封装好的某个功能

　　函数示例:

　　　　1) hide()隐藏
　　　　    show()显示
               toggle()切换
    　　注意:三者都可以传递数字参数控制斜向滑动动画时间(1000ms = 1s)
　　　　2) slideUp()竖直向上滑动动画
  　　　　  slideDown()竖直向下滑动动画
  　　　　  slideToggle()切换动画
　　　　3) fadeIn()淡入
 　　　　    fadeOut()淡出
 　　　　    fadeTo()可以实现半透明 

　　　　　　　　示例:fadeTo(500,0.5)    //第二个参数是透明度的设置(0~1)
  　　　　   fadeToggle()切换
    注意:在使用jquery时,动画和事件会出现排队现象(即:如果一次执行了很多动画，后面的动画不会替换前面的，而是排队等待执行)

　　　　这时我们可以使用插队方法进行解决:
   　　　　 示例:$(this).children().stop().slideUp(); 加一个 .stop() 即可解决
　　　　4)setInterval():　　//可按照指定的周期(以毫秒计)来调用函数或计算表达式
    　　　　　　示例:$(function(){
       　　　　　　 setInterval("f1()",2000);
    　　　　　　})

 

（三）jquery修改css属性

 

1，jquery可以获取行内、内部、外部的样式
2，js dom方式只能获得行内样式
3，包含多种属性样式的需要拆分为具体样式进行获取

 

1)css属性获取及修改:

　　①css单属性获取:alert($(\'div\').css(\'height\'))

　　②css单属性修改:$(\'div\').css(\'属性名\',\'属性值\')

　　③css多属性修改:$(\'div\').css({\'属性名\':\'属性值\',\'属性名\':\'属性值\',...})

　　注意！在书写css复合属性时,要采用驼峰式命名!

　　　　　示例:background-color应写为backgroundColor

　　④.animate({属性名:\'属性值\'},500)　　

　　//动态的css方法,允许创建自定义的动画，可以用来操作多个css属性，使用队列功能，方法将逐一被调用，后续会加入示例。。

2)css类:

       ①添加类:addClass(className)
            示例:$("div").addClass("abcd");//注意:只是添加，覆盖了之前的而没有删除之前的
       ②删除类:removeClass(className)
       ③切换类:toggleClass(className)
           示例:$("div").toggleClass("ab");//有"ab"属性就隐藏，没有就添加

 

 

（四）jquery修改html属性

1，获取html内容(包括格式):

　　　　　$(\'div\').html()   [innerHtml]

　　　　　$(\'div\').html(\'代码\')代码可以识别文本、标签
2，获取html文本内容:

　　　　　$(\'div\').text()   [innerText]

　　　　　$(\'div\').text(代码)设置文本内容  //注意:  如果内容中有标签，会将这些标签当作文本处理

　　　　　　注意:没括号的话是获取信息，有括号是修改信息的值

3，DOM文档处理:

　　1)内部插入（父子级关系）:

　　　　①$(a).append($(b)) 把b插入a中
　　　　②$(b).appendTo($(a)) 把b插入到a中

　　　　　　//注意:这两个都是插入到a里面的后面

　　　　　　与prepend区分，是插入到a里面的前面

　　　　　　//注意:若是已有节点追加，则发生位置移动，即旧节点被移除

　　2)外部插入（兄弟级关系）:

　　　　①$(a).after($(b)) 把b插入到a外面的后面
　　　　②$(b).insertAfter($(a)) 把b插入到a外面的后面

　　　　　　//注意:与before区分，是插入到a外面的前面

　　　　　　//注意:若是已有节点追加，则发生位置移动，即旧节点被移除

　　3)包裹:wrap

　　　　①$(a).wrap($(b))  把a用b包裹起来(每个元素都会包裹)  unwrap不包裹

　　　　②wrapAll:  包裹所有(所有元素包裹在一起)

　　　　③wrapInner:  内部包裹(会包裹指定元素的下一级)

　　4)替换:replaceWith 

　　　　①$(a).replaceWith($(b))  用b替换a

　　　　②replaceAll    $(a).replaceAll($(b))   用a替换b
                //旧节点替换也是位置移动

　　5)删除:empty 

　　　　①empty  删除父节点下的子节点(不包括父节点)
　　　　②remove  删除指定的节点

　　6)克隆:clone(复制)  将内容复制一份
　　　　①var a = $(\'b\').clone(false);    //只复制节点，不包括事件;
　　　　②var a = $(\'b\').clone(true);        //复制节点和其事件;

　　7)attr()的使用:

　　　　①元素.attr();获取属性

　　　　②元素.attr(attr,value);设置属性

　　　　　　示例　　$("input").attr("value");　　　　//获取
　　　　　　　　　　$("input").attr("value","abcd");　　//设置

　　　　③元素.attr({value:"zhi",type:"zhi"});设置多个属性的方法

　　　　　　注意:jquery中不允许在attr中修改或删除type属性

　　8)val()的使用:

　　　　val()在复选框（checkbox）中的使用demo:

    　　　　1)获取(被选中复选框的value值)
        　　　　①获得全部的被选中复选框元素节点对象
        　　　　②遍历全部的被选中复选框
        　　　　③如果有选中就获得其value值

 

        function f1(){
            var s = "";
            for(var i = 0;i<$(\'input:checked\').length;i++){
                s+=$(\'input:checked:eq(\'+i+\')\').val()+",";
            }
            s = s.substr(0,s.length-1);//去除最后的","
            console.log(s);
        }

 

 

 

　　　　　　2)设置(复选框中的含某些value值的项目被选中)

 

        function f2(){
            $(\'input\').val([1,2,4]);
        }

 

 

 　　　　//注意:下拉列表(select option)和单选按钮(radio)的val()获取不需要遍历，直接使用$(\'\').val()即可

　　　　　　　　后续会增加each的用法，便可省去循环遍历的麻烦！

 

（五）jquery核心:选择器

 

1，基础选择器:　　#id(id属性); .class(class属性); element(标签名); *(通配符)

　　　①* 选择器用法示例:$(\'div *\')选中div标签下所有子标签

　　　②selector1,selector2 选择器示例:$(\'div,p,ul\')并集选择器使用

　　　③>表示选中指定的元素唯一的一级子代元素
            注意:还有$(s1 s2)是选中s1下所有s2节点

　　　④+表示选中指定元素其后紧邻的唯一一个元素  示例:$(\'#mw+\')

　　　⑤~表示选中指定元素其余所有的元素  示例:$(\'#mw~\')

2，过滤选择器:　　过滤选择器以 : 开头

　　　①:eq(index)按照指定的索引值进行过滤(索引是从0开始的)  示例:$("li:eq(2)")

　　　②:gt(index)过滤大于指定索引值的所有元素

　　　③:contain("text")匹配含有text内容的元素  示例:$("div:contains(\'文本内容\')")

　　　④:empty匹配内容为空的元素 示例:console.log($("div:empty"));

　　　⑤:has(selector) 选择包含selector的选择器

　　　⑥:lt(index)过滤小于指定索引值的所有元素

　　　⑦(注意:无论大于还是小于，都不包含自身)

　　　⑧:header 选择所有的 h 标签

　　　⑨:not(select)选择除了select的对象  示例:$("li:not(#id名)")   

　　　　 注意    :1)并且选择器可以使用多个,每个判定时下标都归零

　　　　　　　　2)并且选择器使用时没有前后顺序，但要注意不要产生歧义

　　　　　　　　3)各种选择器都可以构成并且选择器

 

3，筛选选择器:　　筛选选择器不会写在选择符号$内，会在 . 之后进行书写
        　　$(this)中的this代表click的元素
        1)子级选择器:$(this).children().css(_,_)
        　　　　(注意:在children后的()内还可以添加属性名,以筛选出符合条件的元素)
        　　①$("li:first-child")选择li标签下第一个子元素  //或者是 first-of-type  同样还有选择最后一个子元素
        　　②$("li:nth-child(2)")选择li标签下第二个子元素
        　　③$("li:nth-last-child(n)")选择li标签下倒数第二个元素
        2)父级选择器:$(this).parent().css(_,_)
            　　应用:$(this).parent().find().action();
        3)兄弟选择器:$(this).siblings().css(_,_) (会筛选出除点击之外的兄弟元素)
            　　从父节点获得内部的子节点: $(\'a\').find(\'b\');    //从a中找b

 

4，属性选择器:

　　　①$("img[src]")选择属性为src的img

　　　②$("img[src=\'a\']")选择src属性为a的img  //同样还有不等于的选择器

　　　③$("img[src^=\'a\']")选择src属性以a开头的img

　　　④$("img[src$=\'a\']")选择src属性以a结尾的img

　　　⑤$("img[src*=\'a\']")选择src属性包含a的img

　　　⑥$("img[src!=\'a\']")选择src属性没有a的元素    //注意:如果没有src属性的，也视为没有a，即会被选中

　　　⑦$("[][][]")        //并且属性选择器，同时满足多个条件的
                //注意:"src"也可以换位其他 name、value、class等属性

 

5，表单域选中选择器:

　　　　①$(:checked)复选框、单选按钮选中选择器

　　　　②$(:selected)下拉列表选中选择器

 

（六）jquery的ajax使用

1，//封装层次较高，可设置参数较少

　　　　1)$.get(url [,data] [function(msg){}回调函数] [,dataType]);

　　　　　　①data:给服务器传递的数据，请求字符串、json对象都可以设置

　　　　　　②function(msg){}:回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理，

　　　　　　③msg泛指从服务器传递回来的信息，

　　　　　　dataType:服务器返回数据类型:html、text、xml、json

　　　　2)$post(url [,data] [,fn 回调函数] [,dataType]);

　　　　　　此方法与$.get()用法一致，不同的是其为post方式请求给服务器传递数据的时候，不需要设置header头

　　　　　　//注意:以上两种ajax请求是异步的，如需设置同步请求，换用其它方式
        
2，//相对底层的ajax使用

　　　　$.ajax({    //json对象

　　　　　　①url:请求地址

　　　　　　②[data]:给服务器传递的数据(请求字符串/json对象)

　　　　　　③[dataType]:默认字符串返回信息，数据从服务器返回格式html、text、xml、json

　　　　　　④[type]:[get]/post请求方式

　　　　　　⑤[success]:function(msg){}  ajax成功请求后的回调函数，可以做后续处理使用       

　　　　　　⑥msg泛指服务器返回来的信息

　　　　　　⑦async:[true]异步/false同步

　　　　　　⑧cache:[true]缓存/false不缓存

 

 

 

作者：一小白
出处：http://www.cnblogs.com/wccc/
本文版权归作者和博客园共有，欢迎转载，但未经本人同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。