jquery总结

最新推荐文章于 2019-12-03 16:37:13 发布

石顺麟

最新推荐文章于 2019-12-03 16:37:13 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端总结

本文链接：https://blog.youkuaiyun.com/qq_40749055/article/details/81010192

前端总结专栏收录该内容

7 篇文章

订阅专栏

04-jquery

jquery版本

//1.xxx  支持IE6 7 8
//2.2.XXX  不支持IE6 7 8
//3.xxx  不支持IE6 7 8

$

//jQuery === $,就是一个函数，可以获取元素，创建元素

使用jquery的步骤

/*引入jquery文件*/

/*入口函数*/
$(function(){...})
jQuery(function(){...})
$(document).ready(function(){...})

DOM对象和jquery对象互换

/*DOM 使用原生的js的方法获取到的对象，DOM对象只能使用DOM的属性和方法*/
var btn = document.getElementById("btn");
window.onload=function(){...}

/*jQuery对象 jQuery对象   是一个包装集  相当于是伪数组的意思*/
var $btn = $("btn")
$(window).load(function(){...})

/*DOM ==> jquery 不需要双引号*/
$(DOM)

/*jQuery ===》DOM对象 就是加上索引值*/
$btn[0]
$btn.get(0)

text()文本内容

/*text() 获取和设置文本内容，只会获取内容，不会获取标签*/

//获取文本内容
var txt = $("div").text()

//设置文本内容
$("div").text("这是用jQuery的方式来设置的文本内容")  //标签不会进行渲染

样式相关

/*获取样式*/
$("div").css("width");

/*设置样式*/
$("div").css("width","600px")
$("div").css({width:"200px",height:"200px"})  //设置多个的时候

/*操作类样式*/

//addClass() 添加类(类名)，不会覆盖开始的类名
$("div").addClass("demo")  //div盒子增加了demo类名

//removeClass() 移除类样式
$("div").removeClass("demo");

//hasClass() 判断类样式，返回值是true或者false
if($("div").hasClass("demo")){
  console.log(123);  //如果div盒子有demo样式，就打印123
}

//toggleClass() 切换类样式 有类则删除，没有则添加
$("div").toggleClass("demo");

全局设置ajax的默认样式

/*就是发送aja请求数据没有回来之前，和请求数据回来之后*/
$.ajaxSetup({
    beforeSend:function(){
        console.log("数据没有回来之前打印123");
    },
    complete:function(){
        console.log("数据回来之后打印456");
    }
})

事件

/*on() bind() delegate()注册事件 trigger()触发事件*/

//on的注册事件和解绑事件，一般用这,隐藏冒泡印象，但是托表会有影响
$("ul").on("click",function(){
    console.log("常规事件注册")
})
$("ul").on("click","li",function(){
    $(this).index()  //获取当前的索引值
    console.log("事件委托选项卡常用的事件")
})

//on的方式事件解绑
obj.off()  //解绑所有的事件
obj.off("mouseenter")  //所有的对应的参数的事件
obj.off("click","**")  //解绑代理的事件，自身注册的事件不受印象

//trigger() 触发某哥盒子的事件
obj.trigger("click")  //触发obj的单击事假，其他事件也是类似的

//bind()可以给同一个事件源，绑定多个相同的事件，不支持给动态创建的元素注册事件
$("div").bind("click mouseenter",function(){
  console.log(123);
})

//unbind的解绑事件，不支持给动态创建的元素注册事件
$("div").unbind()  //解绑所有的事件
$("div").unbind("click")  //解绑对应参数的事件

//delegate()注册事件，支持给动态创建的元素注册事件
$(document.body).delegate("div","click",function(){
  console.log(123);
})

//undelegate()解绑对应参数的事件
$("div").undelegate("click");  //解绑对应参数的事件

/*事件名称*/
mouuseenter()  //鼠标移入
mouseleave()   //鼠标移出
hover(function(){...},function(){...})  //鼠标移入和鼠标移出
focus()  //获得焦点
blur()   //失去焦点
scroll  //鼠标滚动事件

//阻止冒泡  e.stopPropagation()
$("fatherdiv").on("click",function(){
  console.log(123);
})
$("sondiv").on("click",function(e){
  e.stopPropagation();  //阻止父盒子的单击事件，自己注册事件
})

//禁止盒子滑动，并且子盒子可以滑动
$(".father").on("touchmove", function(e) {
    e.preventDefault();
});

$(".father .son").on("touchmove", function(e) {
    e.stopPropagation();
});

阻止a标签的默认行为

$("a").on("click",function(e){
  e.preventDefault();  //jQuery事件的默认行为
  return false;
})

选择器

~~~javascript
/基本选择器 id 类标签名交集选择器并集选择器/
$(“#id”) //id选择器$ (“.class”) //类选择器
$(“li.cuttent”) //交集选择器$ (“li,curent”) //并集选择器

/层级选择器 /
$(“#div>span”).css(“backgroundColor”,”blue”) //子代选择器$ (“#div p span”).css(“backgroundColor”,”red”) //后代选择器
$(“#div+span”).css(“backgroundColor”,”blue”) //相邻选择器$ (“#div~span”).css(“backgroundColor”,”blue”) //兄弟选择器
$(this).siblings().addClass(“active”) //所有的兄弟级标签加active类，自己除外$ (“#li3”).prev().addClass(“active”) //上一个兄弟选择器
$(“#li3”).prevAll().addClass(“active”) //上一个所有的兄弟选择器$ (“#li3”).next().addClass(“active”) //下一个兄弟选择器
$(“#li3”).nextAll().addClass(“active”) //下一个所有的兄弟选择器$ (“#li3”).children(“span”).addClass(“active”) //没有参数就是获取所有子代(孙子)标签，如果带参数就是子级符合参数的标签
$(“#li3”).find(“span”).addClass(“active”) //表示查找当前对象的子级(后代)，必须带参数

/父级选择器/
$(“#li3”).parent() //父级元素，除开自己$ (“#li3”).parents() //所有的父级元素，一直到DOM树的顶层，除开自己

/过滤(伪类)选择器/
$(“ul li:first”).addClass(“active”) //ul下的第一个li标签$ (“ul li:last”).addClass(“active”) //ul下的最后个li标签
$(“ul li:eq(n)”).addClass(“active”) //ul下的第n个li标签，第一个是0$ (“ul li:odd”).addClass(“active”) //ul下的是奇数的li标签，可以做隔行变色
$(“ul li:even”).addClass(“active”) //ul下的是偶数的li标签，可以做隔行变色

/筛选选择器(都是方法)/
$(“ul li”).eq(n) //ul下的第n个li标签，n从0开始$ (“ul li”).first() //ul下的第一个li标签
$(“ul li”).last() //ul下的最后一个li标签$ (“ul li”).filter(“.li4”) //ul下的是类名的li4的li标签
$(“ul li”).not(“.li4”) //在其他的地方有li标签，并且有类型li4也可以找出来，其他的跟sblings类似

/其他选择器/
$(“input[type=’number’]”) //是input标签并且是number类型的$ (“input[type=’checked’]:checked”) //选中的复选框
$(“input[type=’checked’].not(“input:checked”)”) //未选中的复选框

/end()把对象弄到最前面的那个对象/
~~~

获取索引值

/*最好配合事件委托*/
$("ul").on("click","li",function(){
  $(this).index()  //获取当前的索引值，从0开始
})

动画

/*显示和隐藏 show()显示 hide()隐藏 toggle()切换*/
$("div").show(2000)  //共2000毫秒显示
$("div").hide(2000,function(){
  console.log(123);  //共2000毫秒隐藏，隐藏后打印出123
})
$("div").toggle(2000)  //如果是显示就隐藏，如果是隐藏就显示

/*划入和滑出,支持事件和回调函数 slideDown()划入显示 slideUp()滑出消失 slideToggle()切换划入和滑出*/
$("div").slideDown(2000)  //划入，显示出来，在顶部向下划入，在底部向下划入
$("div").slideUp(2000)    //滑出，让盒子消失
$("div").slideToggle()    //切换划入和滑出

/*淡入和淡出，就是不透明度的改变，支持事件和回调函数*/
$("div").fadeIn(2000)  //淡入，就是不透明度慢慢增大，2000毫秒走完
$("div").fadeOut(2000)  //淡出，就是不透明度慢慢减小
$("div").fadeTo("opacity","0.6")  //直接到指定透明度，在一次设置淡入和淡出都是以opacity为准
$("div").fadeToggle()  //切换淡入和淡出

/*运动 linear匀速运动 swing曲线运动*/
$("div").animate({left:800},2000,"linear",function(){
  console.log(123);  //盒子向右匀速移动800px，2000毫秒走完，并走完后打印出123
})

动态创建元素

/*$()动态创建元素*/
var link = $("<a href='http://www.baidu.com'>百度</a>")

/*html()设置和获取内容*/
$("div").html()  //获取内容
$("div").html("内容")  //设置内容

动态创建表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="js/jquery-1.12.2.js"></script>
    <script>
        $(function(){
            // 模拟从后台拿到的数据
            var data = [
                {
                    name: "清华大学",
                    url: "http://www.tsinghua.edu.cn/",
                    type: "中国理科最强大学"
                },
                {
                    name: "北京大学",
                    url: "http://www.pku.edu.cn/",
                    type: "中国文科最强大学"
                },
                {
                    name: "蓝翔技校",
                    url: "http://www.lxjx.cn/",
                    type: "中国挖掘机培训最强"
                },
                {
                    name: "黑马程序员",
                    url: "http://itheima.com",
                    type: "中国IT最强"
                },
                {
                    name: "新东方厨师",
                    url:"http://xingdongfang.cn",
                    type:"炒菜香吗"
                },
                {
                    name:'传智学院',
                    url:'http://czxy.com',
                    type:'8000元以下月薪不用交学费'
                }

            ];
            // 1. 遍历数组，根据数组中元素的长度来动态的创建元素
            var arr = [];
            for(var i=0;i<data.length;i++) {
                var str = '<tr>' +
                        '<td>'+data[i].name+'</td>' +
                        '<td>'+data[i].url+'</td>' +
                        '<td>'+data[i].type+'</td>' +
                        '</tr>';
                arr.push(str);
//                console.log(arr)
            }
            $("#j_btnGetData").click(function(){
                $("#j_tbData").html(arr.join(''));
            });

//            <tr>
//            <td>清华大学</td>
//            <td>http://www.tsinghua.edu.cn/</td>
//            <td>中国理科最强大学</td>
//            </tr>
        })
    </script>
</head>
<body>
<input type="button" value="获取数据生成元素" id="j_btnGetData"/>
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbData">
    <!--<tr>-->
    <!--<td>清华大学</td>-->
    <!--<td>http://www.tsinghua.edu.cn/</td>-->
    <!--<td>中国理科最强大学</td>-->
    <!--</tr>-->
    </tbody>
</table>
</body>
</html>

节点相关

/*克隆节点*/
$("div").clone(true)  //jQuery中的clone无论是true还是false都表示深度克隆，true会克隆事件，false不克隆事件

/*追加节点*/
$("div").append("<b>Hello</b>")  //要追加到目标中的内容
obj1.appendTo(obj0)  //把obj1追加到obj0里面
obj0.prepend(obj1)   // 把obj1追加到obj0里面
obj0.after(obj1)     //每个匹配的元素之后插入内容
before()             //同级后面追加

/*清空节点*/
$("div").html("")  //清空节点内容，不会清空标签
$("div").empty()   //删除匹配的元素集合中所有的子节点,清空节点内容
$("div").remove()  //清空节点包括标签

获取设置表单的值

/*获取表单的值*/
$("input").val()

/*设置表单的值*/
$("input").val("这是设置的内容")

属性操作

/* prop()设置表单属性 checked disabled selected一般用prop*/
$("input").prop("checked",true)  //设置复选框为选中状态
$("input").prop("disabled",true)  //设置表单禁用
$("selected").prop("selected",true)  //设置下拉框默认

/*attr()设置和获取属性*/
$("div").attr("class")      //获取属性
$("div").attr("index","0")  //设置属性

/*removeAttr()移除属性 属性名和属性值一块移除掉为准，与父元素定位无关*/

三大家族

/*offset获取到页面的值，以边框为准，获得的是字符串*/
$("div").offset().left  //获取到页面的left值，得到的没有px了
$("div").offset().top  //获取到页面的top值，得到的没有px了
$("div").offset({
  left:300,  //设置left值为300px，里面的形参只能是对象，会有一个默认的position：relative
  right:300  //设置right值为300px，里面的形参只能是对象，会有一个默认的position：relative
})
$("div").offsetParent()  //获取自己最近的定位的父元素

/*position获取定位的父元素的值，只能读取left和top的值，获取自身的margin到离自己最近的定义的父盒子之间的距离*/
$("div").position().left  //最近定位的父元素的left值
$("div").position().right  //最近定位的父元素的right值

/*scroll滚动*/
$(window).scrollLeft()    //读取页面左边卷的宽度
$(window).scrollLeft(600) //设置左边卷去的宽度为600px
$(window).scrollTop()     //获取页面上面卷的高度
$(window).scrollTop(500)  //设置页面上面卷的高度为600px

事件对象的坐标

/*e.screen获取到屏幕的值，点击鼠标页面到屏幕左上角的X和Y的距离*/
e.screenX  //获取到屏幕的x轴的值
e.screenY  //获取到屏幕的y轴的值

/*e.client获取浏览器可视区的值，点击鼠标页面到浏览器可视区左上角的X和Y的距离*/
e.clientX  //获取盒子到浏览器可视区X轴的值
e.clientY  //获取盒子到浏览器可视区Y轴的值

/*e.page获取的页面的值，点击鼠标页面到页面的X和Y的距离*/
e.pageX  //获取到页面的X轴的值
e.pageY  //获取的页面的Y轴的值

获取元素的宽度和高度

/*width()获取宽度 height()获取高度*/
$("div").width()  //获取元素的宽度
$("div").height()  //获取元素的高度

遍历对象和数组

jQuery.each($confirm_logic_promotion.find("input"), function(i) {
    /**判断复选框是不是选中状态 */
    if (jQuery(this).is(":checked")) {
         confirm_checked_promotion_get_price += parseFloat(
         jQuery(this).attr("confirm-yuan")
       );
   }
});

获取表单的值

/*serialize()  button必须是submit属性，需要用form标签增加submit，input标签必须有name值*/
<form class="productDetails-goods-form">
    <div>
        <span class="productDetails-goods-form-top">价&nbsp;格&nbsp;低&nbsp;于：¥<input type="text" name="productDetails_goods_low_price" value="">时,通知我</span>
    </div>
    <div>
        <span class="productDetails-goods-form-bottom">邮箱或手机号码：<input type="text" name="productDetails_goods_low_price" value=""></span>
    </div>
    <button type="submit" class="mui-btn mui-btn-danger productDetails-goods-form-submit">订阅提醒</button>
</form>

<script type="text/javascript">
 jQuery(
        ".productDetails-content-logic-attention-goods"
    ).on("submit", ".productDetails-goods-form", function() {
        var productDetails_goods_form_data = jQuery(this).serialize();
        console.log(productDetails_goods_form_data);
        //阻止默认行为
        return false;
    });
</script>

单选框或复选框选中和不选中

/*判断是否是选中状态*/
jQuery.each($confirm_card_pay_logic.find("input"), function(i) {
    /**判断复选框是不是选中状态 */
    if (jQuery(this).is(":checked")) {
    confirm_checked_get_price += parseFloat(
        jQuery(this).attr("confirm-yuan")
        );
    }
});

ajax请求

/*$.ajax()就是对原生的ajax请求的封装*/

//post请求并返回的数据是json格式,保存数据到服务器，成功时显示信息，post请求一般是修改数据。
$.ajax({
   type: "POST",  //type 请求的方式，默认是get，如果是get可以省略
   url: "some.php",  //url 请求的url，也就是链接
   data: "name=John&location=Boston",  //data
   dataType: "json",  //dataType 设置返回的数据是json格式
   success: function(date){
     console.log("data是回来的数据，一般是数组对象")
   }
});

//get请求，一般是查看数据，并让返回的数据是json格式
$.ajax({
   type: "get",  //type 请求的方式，默认是get，如果是get可以省略
   url: "some.php",  //url 请求的url，也就是链接
   data: "name=John&location=Boston",  //data
   dataType: "json",  //dataType 设置返回的数据是json格式
   success: function(date){
     console.log("data是回来的数据，一般是数组对象")
   }
});


//跨域请求
$.ajax({  
    type : "get",  
    async:false,  
    url : "http://app.example.com/base/json.do?sid=1494&busiId=101",  
    dataType : "jsonp",//数据类型为jsonp  
    jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数  
    success : function(data){  
        $("#showcontent").text("Result:"+data.result)  
    },  
    error:function(){  
        alert('fail');  
    }  
});   

/* $.get() $.post() $.getJSON() */

//$.get()
$.get("http://v2.hhlme.com/getShopGoodsList.html",{},function(data){
  console.log("data是返回来的数据");
})

//$.post()
$.post("http://v2.hhlme.com/getShopGoodsList.html",{},function(data){
  console.log("data是返回来的数据");
})

//$.getJSON()
$.getJSON("http://v2.hhlme.com/getShopGoodsList.html",{},function(data){
  console.log("data是返回来的数据");
})