A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小石姐姐 于 2019-1-17 10:00 编辑

JQuery :

        概念
                一个javascript框架,  简化js的开发
                javascript框架
                        本质上就是一些js文件,封装了js的原生代码
        快速入门
                步骤
                        下载JQuery
                                jquery-xxx.js与jquery-xxx.min.js的区别
                                        jquery-xxx.js : 开发版本,是给程序员看的,有良好的缩进和注释
                                        jquery-xxx.min.js : 生产版本,是程序中使用的 体积小
                        导入JQUERY文件
                                导入min.js文件
                        使用


        JQuery对象和js对象的区别与转换
                方法不通用

                js和jq对象的互相转换
                        jq-->js
                                jq对象.get(0)
                                jq对象[0]
                        js-->jq
                                $(js对象)

        选择器 : 筛选具有相似特征的元素(标签)
                基本语法学习
                        事件绑定
                                获取对象 $(选择器)
                                事件
                                        (click)事件名称(function匿名函数(内容))
                        入口函数
                                jquery入口函数(dom文档加载完成后执行该函数中的代码)
                                $(function(){

                                });
                                windoe.onload 和$(function)的区别
                                        window.onload只能定义一次,如果定义多次,后边的会将前边的覆盖
                                        $(function)可以定义多次
                        样式控制
                                css(键(属性名称), 值(属性值))

                分类
                        基本选择器
                                标签选择器
                                        $("标签名称")
                                id选择器
                                        $("#id")
                                类选择器
                                        $(".class")
                                并集选择器
                                        $("A,B,...")
                        层级选择器
                                后代选择器
                                        $("A B")
                                子元素选择器
                                        $("A>B")
                        属性选择器
                                属性名称选择器
                                        $(元素[属性名称])
                                属性选择器
                                        $(元素[属性名称=(!=不等于 ^=以什么开始 $=以什么结束 *=包含)'属性值'])
                                复合属性选择器
                                        $("元素[属性名称=''值][属性名称=''值]")
                        过滤选择器
                                首元素选择器
                                        :first
                                尾元素选择器
                                        :last
                                非元素选择器
                                        :not(选择器)
                                奇数选择器
                                        :odd (从0开始)
                                偶数选择器
                                        :even (从0开始)
                                大于选择器,小于选择器,等于选择器
                                        :gt , :lt , :eq
                                标题选择器(h1~h6)
                                        :header
                        表单属性选择器
                                可用元素选择器
                                        :enabled
                                不可用元素选择器
                                        :disabled
                                选中选择器(多选)
                                        :checked
                                选中选择器(下拉列表)
                                        :selected > option
                        表单选择器
                                input标签 type为指定类型的
                                :text --> input[type='text']
                                :input --> 所有的表单标签,包括button,textarea,input,select


        DOM操作
                内容操作
                        html() : 获取/设置元素的标签体内容 ()有参数为设置,无参数为获取
                        text() : 获取/设置元素的标签体纯文本内容 ()有参数为设置,无参数为获取
                        val() : 获取/设置元素的value属性值 ()有参数为设置,无参数为获取
                属性操作
                        通用属性操作
                                attr() : 获取/设置元素的属性
                                removeAttr() : 删除属性
                                prop() : 获取/设置元素的属性
                                removeProp() : 删除属性
                                attr和prop区别?
                                        如果操作元素的固有属性,则建议使用prop
                                        如果操作自定义属性,则建议使用attr
                        对class属性操作
                                css() : 设置/获取样式的值
                                addClass() : 添加class属性值(可以添加多个不同的值)
                                removeClass() : 删除class属性值
                                toggleClass() : 切换class属性
                CRUD操作
                        append() : 父元素将子元素追加到末尾
                                对象1.append(对象2) 将对象2添加到元素1的末尾
                        prepend() : 父元素将子元素添加到开头
                                对象1.append(对象2) 将对象2添加到元素1的开头
                        appendTo()
                                对象1.appendTo(对象2) : 将对象1添加发到对象2内部,并且在末尾
                        prependTo()
                                对象1.appendTo(对象2) : 将对象1添加发到对象2内部,并且在开头
                        after() : 元素添加到对应的元素后边
                                对象1.after(对象2) : 将对象2添加到对象1后边,对象1和对象2是兄弟关系
                        before() : 添加元素到元素前边
                                对象1.after(对象2) : 将对象2添加到对象1前边,对象1和对象2是兄弟关系
                        insertAfter()
                                对象1.after(对象2) : 对象1添加到对象2后边
                        insertBefore()
                                对象1.after(对象2) : 对象1添加到对象2前边
                        remove() : 移除元素
                                将对象删除
                        empty() :                                                                                                                                

        动画效果
                三种方式显示和隐藏元素
                        默认显示和隐藏方式
                                show([speed,[easing], [fn]])显示
                                        参数
                                                speed : 动画执行速度(slow fast 毫秒值)
                                                easing : 用来指定切换效果
                                                        swing:动画执行效果 慢-快-慢
                                                        linear : 匀速
                                                fn :动画完成时执行的函数
                                hide([speed,[easing], [fn]])隐藏
                                toggle([speed,[easing], [fn]])切换隐藏和显示
                        滑动方式
                                slideUp([speed,[easing], [fn]])
                                slideDowm([speed,[easing], [fn]])
                                slideToggle([speed,[easing], [fn]])
                                注意:在使用滑动显示的动画效果是需要给实现动画的标签设置宽度
                        淡入淡出
                                fadeIn([speed,[easing], [fn]])
                                fadeOut([speed,[easing], [fn]])
                                fadeToggle([speed,[easing], [fn]])
        遍历方式
                jq对象.each(callback) -->callback回调函数(可有参(index索引, element元素对象) 无参)
                        jq对象.each(function(i,n){
                                //i代表当前索引
                                //n代表当前索引锁对应的"js对象"
                                return true --> continue
                                return false --> break
                        })
                $.each(object, [callback])
                        $.each(object, callback) -->callback回调函数(可有参(index索引, element元素对象) 无参)
                        $.each(object(jq对象 js数组), function(i,n){
                                //i代表当前索引
                                //n代表当前索引锁对应的"js对象"
                                return true --> continue
                                return false --> break
                        })

                for...of(不常用 在3以上版本可用 )
        事件绑定
                jquery标准绑定方式
                        jq对象.事件方法(回调函数)
                on绑定事件/off解绑
                        jq对象.on("事件名称", 回调函数)
                        jq对象.off("事件名称") off(无参数) 将组件上的所有事件全部解绑
                事件切换 : toggle
                        jq对象.toggle(fn1, fn2, ...)
                                单击jq对象对应的组件后,会执行fn1,第二次点击会执行fn2,...
                                版本在1.9之后需要引入jquery-migrate.js插件的jar包才能使用
                常用事件
                        onclick
                        onload
                        onfocus
                        onblur
                        onsubmit (默认提交 return true)
                        onchange
                        onkey
        插件
                增强jquery的功能
                实现方式
                        jquery.fn.extend(object)
                                增强通过jquery获取对象的功能
                        jquery.extend(object)
                                增强jquery对象自身的功能

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马