17 jQuery基础

1.什么是jQuery

jQuey就是javascript 的第一个第三方库,主要针对标签进行封装(包括节点操作,属性操作,样式操作,事件等 ), 目的是为了让js写起来更快更方便

2.怎么写jQuery代码

a.通过script标签导入jQuery文件
b.在jQuery中所有的内容都是封装到jQuery对象中的,jQuery对象可以用$代替

节点操作

window.onload - 当网络中的内容全部加载成功后触发的事件(如果有网络图片,会等图片加载成功)
$(函数) - 函数中的函数体会等标签全部添加成功后执行

1.等待加载完成

a.
window.onload = function(){
}
b.等待页面中所有的标签添加成功,就会触发
完整版 &(document).ready(function(){})
c.简写版

$(function(){
                //引入inter1 实现暂停功能
                //封装一个计时器
                var inter1;
                function timeAction(){
                    inter1 = window.setInterval(function(){
                        console.log('！！！！')
                    }, 1000);
                }
                timeAction()
                $('#aa').on('click',function(){
                    //如果在计时,点击则停止, inter1 赋值为null表示暂停状态
                    if(inter1){
                        window.clearInterval(inter1)
                        inter1 = null
                    //如果计时器是暂停状态,点击则重新启动 
                    }else{
                        timeAction()
                    }
                });

2获取节点操作(选择器)

a.选择器直接选择相应的标签
('标签选择器') - 选择网页中所有的指定标签,返回值是jQUery对象,不是数组
注意:如果选择器同时选择了多个,返回值和选择一个的时候的类型是一样的
可以通过结果直接对选中的所有标签一起操作

                                var divNodes = $("div");
                console.log('====',divNodes);
                divNodes.css('color','red');
                
                var div11Node = $('#div11');
                console.log(div11Node);
                console.log($('.cdiv1'))
                console.log($('a,p'))
                console.log($('#div2 a'))

b.父子选择器
console.log(('p+a')) - 获取紧贴着p标签的a标签
console.log(('div:first')) - 第一个div标签
console.log(('div *:first-child')) 找到所有div标签中的第一个子标签

3.创建标签

('HTML标签语法') 例如: $('

我是div

var imgNode = ('

4.添加标签

父标签.append(子标签) - 在父标签的最后面添加子标签
父标签.perpend(子标签) - 在父标签的最前面添加子标签

    $('body').append(imgNode)      
                $('body').prepend(divNode)  
                $('h1').before($('我是标题0'))
                $('h1').after($('我是标题22'))

5.删除标签

标签.empty() - 清空指定标签
标签.remove() - 删除指定标签

                            $('#div2').empty()
                $('h1').remove()

6.拷贝和替换(见手册)

7.动态添加:

//1.普通属性的获取和修改 - 除了innerHTML,innerText以及value
                //标签.attr(属性名)  - 获取指定的属性值
                //标签.attr(属性名, 值) - 修改/添加属性
                var text1 = $('img').attr('src')   // 获取属性的值的时候只获取被选中标签中的第一个标签
                console.log(text1)
                console.log($('a').attr('href'))   
                $('img').attr('title', '图片1')  // 修改和添加会针对所有选中的标签 
                
                //2.标签内容属性
                // 双标签.html()
                // 双标签.text()
                // 单标签.val()
                //注意：上面的函数不传参就是获取值，传参就是修改值
                console.log($('p').html())   // 取完整代码
                console.log($('p').text())   // 只取文字
                console.log($('input').val()) //单标签中的val属性
                $('p').html('我是新的段落')    //
                $('input').val('请输入账号')
                
                //3.class属性 - HTML中一个标签可以有多个class值，多个值用空格隔开
                //标签.addClass(class值) - 给标签添加class值
                //标签.removeClass(class值) - 移除标签中指定的class值
                $('div').addClass('w')
                $('#div1').removeClass('c')
                
                //4.样式属性
                //a.获取属性值
                //标签.css(样式属性名) - 获取样式属性值
                var height = $('p').css('height')
                console.log(height)
                //b.修改和添加
                //标签.css(样式属性名, 值) - 修改属性值
                $('p').css('background-color', 'cornflowerblue')
                //标签.css({属性名:值, 属性名2:值2...}) - 同时设置多个属性
                $('p').css({
                    "color":"yellow",
                    'font-size':'30px'
                })
                

                //5.事件
                //a.标签.on(事件名,回调函数) - 给标签绑定指定的事件（和js中的addEventLinsenner一样）
                //事件名不需要要on
                $('button:first').on('mouseover',function(){
                    console.log(this)
                    //注意: this - js对象, 可以直接js对象的属性和方法
                    //     $(this) - jQuery对象，可以使用jQuery对象的属性和方法
                    // $(js对象) - 将js对象转换成jQuery对象
                    //this.innerText = '进入！'
                    $(this).text('进入~')
                });
                
                //b.父标签.on(事件名,选择器,回调函数) - 在父标签上添加事件，传递给选择器对应的子标签
                //选择器 - 前面标签的后代标签(子标签/子标签的子标签)
                $('#v01').on('click','.v011 .v0111',function(){
                    console.log(this)
                })

day27-jquery