JQuery

最新推荐文章于 2023-08-25 13:53:37 发布

陈斌-cb

最新推荐文章于 2023-08-25 13:53:37 发布

阅读量112

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/cbbgs_cb/article/details/123750621

版权

jQuery

1.选择器

选择器和css的选择器差不多，只有几个不一样

// 选择器  和css的选择器差不多，只有几个不一样

// 类选择器，有多少选中多少
 $(".box").css("background","red");
// id选择器  只能选中第一个
 $("#box").css("background","red");
// 标签选择器
 $("div").css("background","red");
// 群组选择器
  $("div,ul").css("background","red");
// 子代选择器
 $("div span").css("background","red");
// 通配选择器
 $("*").css("background","red");

// 亲儿子选择器
 $(".box2>span").css("background","red");
// 下一个节点 当前节点.box1的下一个位div的节点
 $(".box1+div").css("background","red");

// 下一个全部兄弟节点
 $(".box1~div").css("background","red");

// 属性选择器
 $("input[name]").css("background","red");
 $("input[name]").css("background","red");
 $("input[name=123 type]").css("background","red");
 $("input[name=123][type=text]").css("background","red");

// 伪类选择器

// 第一个子元素  作用在子元素上
 $("li:first").css("background","red");

// 最后一个
 $("li:last").css("background","red");

// 排除选取
 $("li:not(.red)").css("background","red");

// 偶数
 $("li:even").css("background","red");
// 基数
 $("li:odd").css("background","red");
// 选取对应的第几个  和nth对应
 $("li:eq(1)").css("background","red");

// 内容包含的标签 内容包含1的标签
 $("li:contains(1)").css("background","red");
// 选取空标签，空格都不能有
$("li:empty").css("background","red");
// 选择子元素包含has的父标签
 $("ul:has(.red)").css("background","red");

// 不可见可见性
 $("li:hidden").css("background","red");
// 可见
$("body:visible").css("background","red");

2.过滤器

// 过滤器 比选择器性能好。


// 子代选择器
// $(".div span").css("background","red");
 $(".box2").find("span").css("background","red");

// 亲儿子选择器
// $(".box2>span").css("background","red");
 $(".box2").children("span").css("background","red");

// 下一个节点 当前节点.box1的下一个位div的节点
// $(".box1+div").css("background","red");
 $(".box1").next("div").css("background","red");

// 下一个全部兄弟节点
// $(".box1~div").css("background","red");
 $(".box1").nextAll("div") .css("background","red");

// 伪类选择器

// 第一个子元素  作用在子元素上
// $("li:first").css("background","red");
 $("li").first().css("background","red");

// 最后一个
// $("li:last").css("background","red");
 $("li").last().css("background","red");


// 排除选取
// $("li:not(.red)").css("background","red");   
 $("li").not(".red").css("background","red");

// 选取对应的第几个  和nth对应
// $("li:eq(1)").css("background","red");
 $("li").eq(1).css("background","red");

// 选择子元素包含has的父标签
// $("ul:has(.red)").css("background","red");
 $("ul").has(".red").css("background","red");


// 判断选择器

 console.log($("li").is("red"));
 $('li').hasClass('red');

// 父元素
 $(".red").parent().css("background","red");
// 所有父元素
 $(".red").parents().css("background","red");
// 指定范围父元素
 $(".red").parentsUntil(".list").css("background","red");

// 下一个兄弟  next  nextAll  nextUntil
// 上一个兄弟  prev  prevAll  prevUntil

// 兄弟元素   sliblings()
// 返回上一个正在操作的元素  end()

3.DOM操作

样式操作

用cs()方法来操作

//设置多个样式 传入一个对象
$("div").css({
    width:"100px",
    height:"100px",
    color: "#cccc"
})

// 获取样式
$("div").css("width")
// 获取多个样式 就传入一个数组

$("div").css(["background","width","height"])

属性操作

用attr()方法

// 设置属性
$("div").attr("abc","123")
// 设置多个属性
$("div").attr({
    "data":"2022",
    "date":"333"
})

// 获取属性
$("div").attr("abc")

内容操作

有参数就是设置，没有就是获取

html()可以解析标签 text()不可以解析标签

$(“div”).html(“

111111

”);

表单内容用val()

class操作

//添加calss
$("div").addClass("box2");

//删除calss
$("div").removeClass("box1 box4");

 // 如果元素没有当前class那么添加，如果有那么删除toggleClass
 $("div").toggleClass("box1");

尺寸获取

width() 内容宽度

innerWidth() padding + 内容宽度

outerWidth() padding + border + 内容宽度

offset() 获取某个元素相对于浏览器窗口(可视区域的距离)

scrollTop() 获取垂直滚动条的值

scrollLeft() 获取水平滚动条的值

4.事件

绑定方式

jquery 所有的事件绑定都是DOM2级绑定：可以重复绑定

1.常规绑定，将事件做成函数

$("div").click(function(){
 
})

2.one绑定：事件只执行一次

 $("div").one("click",function(){
                console.log(111)
            })

3.on绑定 off方法删除绑定可以起名字

$("div").on("click.aa",function(){
    console.log("aa")
})
$("div").on("click.bb",function(){
    console.log("bb")
})

$("div").off("click.bb")

on的事件委托第二个就是需要点击的元素

$("div").on("click","p",function(){
    console.log(this)
})

5.hover绑定两个参数，第一个是进入的事件，第二个是离开的事件

$("div").hover(function(){},function(){})

6.ready() 页面加载事件

$(function(){})

绑定对象

jquery事件的事件对象是经过兼容封装的

javaScript事件对象是浏览器默认传入的，但是对于浏览器的兼容问题，我们需要对事件对象进行兼容。很烦！但是jQuery已经帮我们解决了所有兼容性的烦恼，并且给我们添加了很多有用的方法。

event.target 获取绑定事件的DOM元素

event.type 获取事件的类型

event.data 获取事件中传递的数据

event.pageX/pageY 获取根据页面原点的X,Y值

event.screenX/screenY 获取根据显示器窗口的X,Y值

event.offsetX/offsetY 获取根据父元素X,Y值

event.which 获取当前鼠标点击的键1,2,3

event.altKey/shiftKey/ctrlKey/ 返回 true、false

event.preventDefault() 阻止默认行为

event.stopPropagation() 取消事件冒泡

return false 阻止默认事件和事件冒泡，双层阻止，小心使用

5.ajax

jq的大部分的ajax功能的方法，都是$.xxx()的执行方式

jq提供了很多能实现ajax请求的方法

- $.getScript(); 发起jsonp的跨域请求

- $.getJSON() 发起JSON文件请求

- $().load() 发起html文件请求

- $.get() 发起get请求

- $.post() 发起post请求

- $.ajax() 发起所有的数据请求

1.$.get()

let abc= $.get("url",{
    对象
},function(res,state,xhr){
    
},"text")
//最后一个为文本格式，一般不用修改或者省略不写
// 请求失败会执行的方法
abc.error(function(xhr, state, res){
    console.log(xhr)
    console.log(state)
    console.log(res)
})

2.ajax()

  // 请求json
    $("#btn1").click(function(){
        $.ajax({
            url:"http://localhost:3000/data/test.json",
            success:res=>{
                console.log(res)
            },
            dataType:"json"
        })
    })

    // 请求jsonp
    $("#txt").on("input", function(){
        $.ajax({
            url:"https://suggest.taobao.com/sug",
            data:{
                code:"utf-8",
                q:$(this).val(),
                _ksTS:"1636342415828_460"
            },
            success:res=>{
                let str = "";
                res.result.forEach(val=>{
                    str += `<li>${val[0]}</li>`
                })
                $(".list").html(str);
            },
            dataType:"jsonp",
            jsonp:"callback"
        })
    })

    // html请求
    $("#btn3").click(function(){
        $.ajax({
            url:"http://localhost:3000/data/hello.html",
            success:res=>{
                $(".box").html(res);
            }
        })
    })

    // 有loading效果的post请求
    $("#btn4").click(function(){
        $.ajax({
            url:"http://localhost:3000/api",
            type:"post",
            data:{
                type:"getGoods"
            },
            success:res=>{
                console.log(res)
                $(".img").hide();
            },
            beforeSend:()=>{
                // alert("准备发起请求了")
                $("<img class='img' src='./loading.jpg'>").appendTo($("body"))
            }
        })
    })

    // 有超时效果的请求
    $("#btn5").click(function(){
        console.log(1)
        $.ajax({
            url:"http://localhost:3000/api",
            data:{
                type:"getGoods"
            },
            success:res=>{
                console.log(res)
            },
            error:(a,b,c)=>{
                console.log(b)
                console.log(c)
            },
            timeout:5
        })
    })


    // 不会触发ajax的全局事件的请求
    $("#btn6").click(function(){
        $.ajax({
            url:"http://localhost:3000/data/test.json",
            success:res=>{
                console.log(res)
            },
            dataType:"json",
            global:false
        })
    })

3.$().load()

有公共的页面可以抽取出来。

在hello.html

<div id="top">
    <div>我是标日
    </div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    
    </ul>
</div>

<div id="foot">
    <p>我是尾部</p>
</div>

在另一个页面

// 可以进行外部的引用，将公共的部分抽取出来，进行复用
$("input").click(function(){
    $("div").load("http://localhost:3000/data/hello.html #top",function(){
        $("div li").click(function(){
        })
    })

    $("footer").load("http://localhost:3000/data/hello.html #foot",function(){
        $("#foot").css("background","red");
    })
})

6.工具类方法

// 循环
const obj = {
    name:"zhangsan",
    age:12,
    height:"180cm"
}

$.each(obj,function(key,val){
    console.log(val);
})

// 序列化（查询请求）
console.log($.param(obj));