jquery—— js工具库

目录

1.概念

2.三部曲

1.获取元素

2.绑定事件

3.修改、获取

3.其他

 4. 与服务器交互

5.跨域

---

1.概念

    jQuery 是一个流行的 JavaScript 库，用于简化在网页中使用 JavaScript 的操作。它提供了一系列方便的功能和方法，可以使开发者更容易地处理 HTML 文档遍历、事件处理、动画效果、Ajax 等任务。 
    下载
        https://jquery.com/download/：生产版本 压缩过的 体积小   
        https://www.jquery123.com/：开发版本 未压缩 体积大 可以看源代码
    引用jquery
        在head中使用script结合src
        console.log($); 打印函数则引入成功
    文档加载完毕事件：$(funtion(){"加载完毕"})

2.三部曲

1.获取元素

            $("选择器)
                返回的是jquery对象
                jquery转js
                    get(0)
                js转jquery
                    $(js对象)
                $(this)
                    js转jquery
            遍历
                each
                    function(index,item){$(item)}

2.绑定事件

            js所有事件
                事件名不带on
            $(this).click(funtion(e){})
            $(this).on("事件名","函数名")
            $(this).off("事件名","函数名")
                不带函数名 则关闭所有函数
            $(this).one("事件名","函数名")
                只执行一次

3.修改、获取

            内容
                text()
                html()
                    识别标签
                如果没有实参就是获取 有实参就是设置
            属性
                普通属性
                    attr("属性名")
                        获取
                    attr("属性名","属性值")
                        设置
                类名属性
                    hasClass()
                    addClass()
                    removeClass()
                    toggleClass()
            样式
                css
                    css("属性名")
                        获取
                    css("属性名"," 属性值")
                        设置
                    css({"属性名":" 属性值"，"属性名":" 属性值"})
            动画
                显示与隐藏
                    show
                    hide
                    toggle
                自定义
                    animate({},time,funtion(){})

3.其他

        相关元素
            父：parent()
            子：children()
            上一个：prev()
            下一个: next()
            同级别其他的: siblings()
        创建与删除
            A.appendTo(B)
                返回A
                A是创建内容
            A.append(B)
                返回A
                B是创建内容
            目标元素.remove()
                移除
            目标元素.empty()
                删除目标元素子元素

 4. 与服务器交互

        form表单
            将用户数据提交到服务器
            缺点：必须刷新整个页面
        ajax异步刷新
            阿贾克斯，推荐使用，局部刷新页面

$.ajax({})
    url:服务器地址
    method
        get : params  get参数
        post：data    post参数
    success：成功回调

5.跨域

 错误提示：No 'Access-Control-Allow-Origin' header
    原理：浏览器同源
            协议 ip 端口 必须一致
            否则不允许解析数据
    解决方案： iquery，使用jsonp