jQuery

最新推荐文章于 2021-04-23 21:39:54 发布

小叮当仁不让

最新推荐文章于 2021-04-23 21:39:54 发布

阅读量114

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_44971069/article/details/109648809

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery

一个快速的，简洁的JavaScript框架。

jq的设计思想

选择网页元素

1.模拟css选择器

$("#div1").css("backgroundColor","red");

2.独有的表达式选择

$("li:first").css("backgroundColor", 'red');

3.多种筛选方式

$("li:eq(2)").css("backgroundColor", 'red');
//$("li").eq(2).css("backgroundColor", 'red');

jQuery的写法

1.方法函数化

$(function(){
    //添加一个点击事件
    $("h1").click(function(){
        alert("我被点击了");
    })
 });

2.链式操作

$("h1").click(function(){
                    alert("单击");
                }).css("backgroundColor", 'orange')
                .mouseover(function(){
                    this.style.backgroundColor = 'red';
                }).mouseout(function(){
                    this.style.backgroundColor = 'blue';
                })

3.取值赋值合体

alert($("input").val());
$("input").val("world hello");

JQuery和JS可以共存，但是不能混用。

jQuery方法

filter（）

过滤对已经获取到的网页元素进行过滤

not

filter的反义词

has

拥有，直接判定子节点中是否有符合条件的元素。

$(function(){     
$("div").filter(".box").css("backgroundColor", 'orange');        $("div").not(".box").css("backgroundColor", 'orange');     $("div").has(".box").css("backgroundColor", 'orange');
})

prev （）

查找当前兄弟节点中的上一个节点

next（）

查找当前兄弟节点中的下一个节点

find()

查找子节点

index()

获取当前节点在兄弟节点中的下标

eq(下标)

通过下标获取指定的元素节点

alert($("h3").index());
$("li").eq(3).css("backgroundColor", 'orange');

attr()

设置和修改行间属性

			//一次性修改多条属性
                $("#div1").attr({
                    title: 'world',
                    class: "xxxx",
                    yyy: "zzz"
                })

addClass()

removeClass()

【注】操作class属性

$(function(){
                $("#div1").addClass("box3 box4 box2");
                $("#div1").removeClass("box2 box3");
            })

width()

innerWidth()

outerWidth()

$(function(){
                // alert($("#div1").css("width")); //"100px" 字符串
                alert($("#div1").width()); //width
                alert($("#div1").innerWidth());  //width + padding
                alert($("#div1").outerWidth());  //width + border + padding
                alert($("#div1").outerWidth(true)); //width + border + padding + margin
                
            })

insertBefore() before()

链式操作的主语是不一样的

insertAfter() after()

appendTo()

插入到子节点的末尾 appendChild(类似JS的方法) append()

prependTo() prepend()

插入到子节点的首位

remove()

$(function(){
                 //找到span节点插入到div的前面
                // $("span").insertBefore($("div"));

                //找到div节点，插入到span节点的后面
                // $("div").insertAfter($("span"));

                //找到span节点，插入到div节点的子节点的末尾
                // $("span").appendTo($("div"));

                //找到span节点，插入到div节点子节点的首位
                // $("span").prependTo($("div"));

                // $("div").remove();

                 //找到span节点插入到div的前面
                // $("span").insertBefore($("div")).css("backgroundColor", 'red');

                //div节点前面是span
                $("div").before($("span")).css("backgroundColor", 'red');
             })

scrollTop() 输出滚动高度

offset() 直接获取当前元素，距离最左边的距离，margin不算数的。
position() 直接获取，当前元素，距离第一个有定位父节点的距离，margin算在内
offsetParent() 查找第一个有定位的父节点，如果父节点没有定位就继续往上去找，最终找到html节点。

$(function(){
                // alert($("#div2").offset().left);

                 alert($("#div2").position().left)
                // alert($("#div2").position().top)

                $("#div2").offsetParent().css("backgroundColor", 'yellow');
            })

val() value

获取/设置表单元素的值

size()

输出，获取网页元素的个数

each() 遍历

		$(function(){
                 alert($("input").val()); //JQ取值只能去第一个符合条件元素的值

                 $("input").val("hello world"); //JQ赋值批量操作，会对所有获取到的元素进行赋值。
                /*
                    css()
                    attr()
                    html()
                    【注】都是批量操作。
                */
                 alert($('input').size());
                alert($("input").length); //jq里面的

                //循环
                $("input").each(function(index, item){
                     item.value = index;//js
                    //$(item).val(index);//jq
                })
            })

特效函数

hover(funcOver, funcOut)

//移入移出

hide() 隐藏

第一个参数：动画持续的毫秒数
第二个参数：回调函数，动画结束的时候执行的

show() 显示

【注】动画效果是，从左上角收起和从左上角展开

slideDown()

slideUp()

动画效果是卷闸效果。

fadeIn() 淡入

fadeOut() 淡出

fadeTo

(动画持续时间, 透明度0~1, 回调函数);

$("#div2").fadeTo(2000, 1, function(){    
$("#div1").html("移出")
})

动画函数

animate
默认的运动形式是慢快慢
匀速 “linear”
慢快慢 “swing”
拓展更多animate的运动形式：
引入 jquery-ui

我们可以在每次调用animate之前先去调用一次stop关闭上一次定时器

$("#div1").stop(); //停止第一个动画，当时后续动画正常运动
$("#div1").stop(true); //停止所有动画
$("#div1").stop(true, true); //停止所有动画，并且将当前正在进行的动画，直接到达目的值
$("#div1").finish(); //停止所有动画,并且将所有的动画都到达目的值

delay() 延迟动画

$("#div1").animate({width: 300}, 2000).delay(4000).animate({height: 300}, 2000);

remove() 删除元素节点

【注】并不会保留这个元素节点上之前的事件和行为

detach() 删除元素节点

【注】会保留这个元素节点上之前的事件和行为

JQuery 标签间的内容 html() 相当于innerHTML
JQuery 标签间纯文本 text（) 相当于innerText

$(function(){
        /*  alert($("#div1").html()); //<em>em</em>div文本<strong>strong</strong>
        alert($("#div1").text()); //emdiv文本strong */
        // $("#div1").html("<h1>hello world</h1>");//自动解析
        $("#div1").text("<h1>hello world</h1>");//纯文本
            })
            
<div id = 'div1'><em>em</em>div文本<strong>strong</strong></div>

节点操作

【注】下述所有的方法的参数都是选择器
siblings() 用来除当前节点外，所有的兄弟节点
nextAll() prevAll()
parentsUntil() nextUntil() prevUntil()

$(function(){
                $("#p1").siblings().css("backgroundColor", 'blue');
//              $("#p1").nextAll().css("backgroundColor", 'red');
//              $("#p1").prevAll("h1").css("backgroundColor", 'red');
//              $("#p1").nextUntil("strong").css("backgroundColor", 'orange');
//              $("#p1").prevUntil("h1").css("backgroundColor", 'orange');
//              $("#p1").parentsUntil("body").css("backgroundColor", 'green');
            })

wrapAll() 整体包装

wrap() 每一个获取到的元素节点单独包装wrapInner() 内部包装
unwrap() 删除包装删除上面一层包装，不包括body节点

wrapInner() 内部包装

		$(function(){
                 //我们给页面上所有的span节点加一个包装，直接JQ创建节点的代码
                  $("span").wrap("<p class = 'box' title = 'hello'></p>");
                 $("span").wrapAll("<p class = 'box' title = 'hello'></p>");
                 $("span").wrapInner("<p class = 'box' title = 'hello'></p>");
                $("span").unwrap(); //没有参数
             })

parent() 获取父节点

parents() 获取父节点们参数选择器
closest() 必须传入参数，参数也是选择器，只获取第一个符合条件的元素，从自己开始去查找的

clone()

默认只会克隆节点本身，并不会克隆我们元素节点的行为和事件

clone(true) 既会克隆节点本身，还会克隆元素节点的行为和事件

add()

可以将多个选择器拼接在一起

slice() slice(start, end) [start, end)
获取指定范围内获取到的元素节点。

数据串联化

serialize() 将我们表单中的数据拼接成querystring（查询字符串） name1=value1&name2=value2
search ?name1=value1&name2=value2
querystring name1=value1&name2=value2
serializeArray() 将表单数据拼接成数组

事件

事件绑定 off on

【注】通过事件监听，后面的的事件没有被覆盖

$(function(){

             //1、给一个事件添加一个函数
            /*  $("#div1").on("click", function(){
                 alert("hello");
             }) */

             //2、同时给多个事件添加一个函数， 多个事件之间可以通过空格隔开
             /* var i = 0;
             $("#div1").on("click mouseover", function(){
                $(this).html(i++);
             }) */

             //3、给不同的事件添加不同的函数
             $("#div1").on({
                 click: function(){
                     alert("点击");
                 },
                 mouseover: function(){
                     $(this).css("backgroundColor", 'orange');
                 },
                 mouseout: function(){
                     $(this).css("backgroundColor", 'blue');
                 }
             })

             $("#div1").click(show);

             function show(){
                 alert("show");
             }

             //4、事件委托（后添加的事件也可以点击）
             /* 
                第二个参数，是触发对象的选择器
              */
             /* $("ul").on("click", "li.box", function(){
                $(this).css("backgroundColor", 'red');
             })
             var i = 6;
             $("#btn1").click(function(){
                 //新增li节点
                $(`<li class = 'box'>${i++ * 1111}</li>`).appendTo($("ul"));
             }) */
             //取消事件
             $("#cancel").click(function(){
                // $("#div1").off(); //取消所有事件上的所有函数
                // $("#div1").off("click"); //取消某一个事件下的所有函数

                $("#div1").off("click", show); //取消某一个事件下指定的函数
             })
         })

ready 事件

$(document).ready() 事件触发在当前的document加载完成以后执行。
window.onload();
document加载完毕肯定是在window加载完毕之前。

1快 2 快我是onload

window.onload = function(){
               alert("我是onload")
           }
            $(function(){
                alert(1);
            });
            $(document).ready(function(){
                alert(2);
            })

事件的细节

【注】都是兼容的后。
• ev pageX

which
鼠标事件：button
1 左键
2 滚轮
3 右键

keydown: keyCode 键码
keypress: charCode 字符码不支持功能键区分大小写

preventDefault stopPropagation

【注】大家不能为了使用JQ而使用JQ。如果实际开发的时候JS一些比较的简单的操作，没必要写成JQ代码。

$(function(){
$(“div”).click(function(ev){
alert(this.id);

                 ev.stopPropagation();
             })
             $("a").click(function(ev){
                /*  ev.preventDefault();
                 ev.stopPropagation(); */

                 //既阻止事件冒泡，又阻止默认行为
                 return false;
             })

             $(document).mousedown(function(ev){
               /*  alert(ev.pageX + ", " + ev.pageY); //带滚动距离
                alert(ev.clientX + ", " + ev.clientY); //可视窗口为原点 */

                alert(ev.which);
             })

             /* $(window).keydown(function(ev){
                 alert(ev.which);
             }) */

             $(window).keypress(function(ev){
                 alert(ev.which);
             })
         })

JQ的工具方法

JQ的工具方法和我们自己封装的js方法没有任何区别。
$() 下的常用方法 (都没用了， E C M A 5 和 E C M A 6 类似功能的函数) J Q 的方法调用：$ ().xxx() $() . y y y () 必须 J Q 对象调用这个函数 J Q 的工具方法：$ .xxx() $.yyy()
• type() 输出当前数据类型 typeof(对象)
• trim()
• inArray() indexOf() 查找某个元素的下标
• proxy() 功能类似于bind $.proxy()
• noConflict()
• $.parseJSON() JSON.parse()
• makeArray() 将伪数组转成数组。 Array.from()

jQuery的cookie

具体调用的格式
$.cookie(name) 通过name取值
$.cookie(name, value) 设置name和value
$.cookie(name, value {
可选项
raw: true value不进行编码
默认false value要进行编码的
})
$.cookie(name, null); 删除cookie

jQuery的ajax

data 下载到的数据
statusText 下载的状态 success
xhr ajax对象

				$.ajax({
                         type: "get",//指定下载的方式
                         url: "https://api.asilu.com/weather/",//下载的路径
                         data: {
                             city: "青岛"//传递的参数
                         },
                         dataType: "jsonp",//jsonp跨域
                         success: function(data, statusText){
                             // alert(data + ", " + statusText);
                             console.log(data);

                         },
                         error: function(msg){
                             alert(msg);
                         }
                     })

JSONP跨域的原理及实现

JSONP是一种解决跨域问题的方法，并不是一种数据格式（不同于JSON），是一种绕过同源策略实现跨域获取数据的解决方案，是一种非正式传输协议

同源策略是一种安全策略，所有支持JavaScript的浏览器都会使用同源策略

同源是指协议、端口、域名相同，不同源将无法请求到对应数据

接口实现方法：JSONP实现跨域，是利用src或href属性不受同源策略限制的特点，动态创建script标签，将远程接口赋值给src获取数据，并通过回调函数来接受和处理数据，达到跨域的目的。

**jquery实现：**jquery把jsonp的实现封装到了ajax中，但jsonp的实现与ajax的实现原理根本不是一回事。ajax的核心是通过XMLHttpRequest获取非本页内容，而jsonp的核心则是通过HTTP来动态添加

优点：

不受同源策略的限制
兼容性好，在老版本浏览器中仍可运行，不需要XMLHttpRequest或ActiveX的支持
在请求完毕后可以通过调用callback的方式回传结果，将回调方法的权限给了调用方、

缺点：

只支持GET请求而不支持POST等其它类型的HTTP请求
只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题
jsonp在调用失败的时候不会返回各种HTTP状态码
存在一定的安全问题

小叮当仁不让

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery一个快速的，简洁的JavaScript框架。jq的设计思想选择网页元素1.模拟css选择器$("#div1").css("backgroundColor","red");2.独有的表达式选择$("li:first").css("backgroundColor", 'red');3.多种筛选方式$("li:eq(2)").css("backgroundColor", 'red');//$("li").eq(2).css("backgroundColor", 'red');
复制链接

扫一扫

专栏目录