黑马程序员技术交流社区

标题: jQuery学习笔记 [打印本页]

作者: 桓92 时间: 2018-9-9 16:52
标题: jQuery学习笔记
下面是我学习jQuery的一些笔记和今天学习Vue的笔记，发个帖记录一下

JQ特殊效果：
            fadeIn(speed, callback) 淡入

            fadeOut(speed, callback)  淡出

            fadeToggle(speed, callback)  切换淡入淡出

            fadeTo(speed, opacity, callack) 允许渐变为给定的不透明度（opacity设置透明度 0～1）
                      hide() 隐藏元素

               show() 显示元素

               toggle()          切换元素的可见状态

               slideDown() 向下展开

               slideUp() 向上卷起

            slideToggle() 依次展开或卷起某个元素
               （如果图片要用到卷起和展开，必须要设置宽和高）

            stop()  阻止动画事件的排队机制，写在动画事件的前面（最好都要写这个）

链式调用：
            query对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写

JQ属性操作：

            （1）取出或设置html内容

                              变量 = 对象.html()

                              对象.html("写入内容")

                              （其实和JS中的innerHTML类型的用法）

            （2）取出或设置某个属性的值

                              变量 = 对象.prop('属性名')

                              对象.prop({'属性名'：‘属性值’})

                              特殊：
                                       获取value属性的简写方法：只有value有这种写法  对象.val()

                                          给value设置内容，在小括号中书写对象.val()

JQ事件：
            blur() 元素失去焦点

            focus() 元素获得焦点

            click() 鼠标点击

            mouseover()             鼠标进入（进入子元素也触发，一般不使用）

            mouseout()             鼠标移出（离开子元素也触发，一般不使用）

            mouseenter()       鼠标移入（进入子元素不触发）

            mouseleave()       鼠标离开（离开子元素不触发）

            hover() 同时为mouseenter和mouseleave事件指定处理函数，里面两个参数，第一个是移入函数，第二个是离开函数
            （一般建议使用）

            ready()             DOM加载完成（即入口事件）

            submit()       用户提交表单

            change() 当下拉框发生改变就会触发此事件

            焦点事件指的是文本框中的光标（让页面一进来就获取光标直接调用  对象.focus() ）

            提交事件必须要选择form标签才能用来提交事件，返回值为true可以提交，返回值为false不可以提交

表单验证的正则表达式：

                     正则书写规则：

                                    （1）var re=new RegExp('规则', '可选参数')（一般不用）

                                    *（2）var re=/规则/参数（建议使用）

                     转义字符匹配：

                                             \d 匹配一个数字，即0-9
                                             \D 匹配一个非数字，即除了0-9
                                             \w 匹配一个单词字符（字母、数字、下划线）
                                             \W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
                                             \s 匹配一个空白符
                                             \S 匹配一个非空白符
                                             \b 匹配单词边界
                                             \B 匹配非单词边界
                                             . 匹配一个任意字符

                                             （基本正则匹配都是通用的）

                     修饰参数：

                                    g：global，全文搜索，默认搜索到第一个结果停止

                                    i：ingore，忽略大小写，默认大小写敏感

                      正则默认匹配规则：

                                    匹配成功就结束，不会继续匹配，区分大小写

                     网页中正则匹配用法：

                                    正则.test(字符串) 匹配成功就返回真，否则返回假

控制滚动条顶部的高度一直在输入的地方：

                                    对象.scrolltop('99999999999999')

                                    里面的无限大写，可以实现这种效果

使用键盘事件：

                     对象.keyup(functon(e){

                              (使用键盘事件，里面的函数一定要添加一个形参e，以便下面去判断键盘时使用)

                     if(e.keyCode == 数字){

                              （e.keycCode 可以感应键盘点击下去的数字，每个键代表不同的数字，可以通过alert(e.keyCode)测试每个键）

                                    对象.click()
                                             （如果前面写了某个对象的事件，在下面只需要直接写出这个这个事件而不用写出内部函数）
                              }
                     })



事件冒泡：

            当子级和长辈都写了事件，当你触发子级的时候，会把事件冒泡到长辈身上，长辈也会触发当前的事件

            （1）阻止事件冒泡
                              event.stopPropagation() （不建议使用）

            （2）阻止表单提交
                              event.preventDefault()             （不建议使用）

            实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用，只需要在函数中写return false

            return false有两个作用:
                                                      (1)阻止事件冒泡
                                                      (2)阻止表单提交

DOM操作：

            对象.before(数据)             在元素外部的前面去添加数据，和对象是兄弟关系

            对象.after(数据)             在元素外部后面添加数据，和对象是兄弟关系

            对象.append(数据)             在元素内部后面添加数据，和对象是父子关系

            对象.prepend(数据)       在元素内部前面添加数据，和对象是父子关系

            对象.remove() 删除此标签

            （如果添加节点的操作，里面是添加一个选择器的话，代表是剪切）

事件委托：

            动态添加的节点是不能获取任何事件的，事件委托就是来解决这个事情的
            （动态添加指的是在界面中手动去添加的）

            $('父辈').delegate('要点击的元素'，‘事件名称’，functio(){要执行的程序})

            注意：只要是父辈都可以，甚至是body，但一定是默认有的，不能是添加的

placeholder专门做提示文字的，这是一个属性直接在input中写入此属性就可以  （HTML5有兼容问题，IE8以下的浏览器不支持的）

让某个效果一直动，只能使用定时器，一般连续循环走动的图片都是使用两张一样的图片

想要知道哪个标签的个数就以此标签为对象（对象.length）就能获取注意：length后没有括号

想要知道某个对象有没有某个类（对象.is(".类名")）

Vue.js初体验

Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。

Vue模板语法
            div就是vue的语法环境,一定要用div标签。id名字随意
<div id="app">


<a href="#">{{ txt }}</a>
{{ num }}
</div>

            <script type="text/javascript">
         //通过实例化创建vue的对象
         var vm = new Vue({
//绑定的那个id
         el:'#app',
//自定义的属性。要往页面输出的内容，基本上都是写在data属性中
         data:{
            txt:'hello vue!!',
            num:123
         }
            })
            </script>

            调用属性的时候，别用++--
         胡子语法里面，带了单引号就是字符串，原样输出
         三元运算符 ok?为真显示这里:为假就显示这里
{{ ok? 'A':'B' }}

Vue中的事件
<div id="app">
<h1> {{ num }} </h1>



<input type="button" value="递增" @click="num+=2" />
</div>

华丽的分割线-------------------------------------------------------------------------------------------------------------------
以上就是我这两天关于jQuery的笔记心得分享，有什么错误欢迎大家指出