2019-05-21jQuery基础

一、jQuery介绍

1.什么是jQuery

jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
如果想要使用jQuery必须先导入jQuery的js文件

js可以将任何内容转换js对象，例如:document、节点、事件对象
jQuery提供的方法只支持jQuery对象

在jQuery中() -> 创建jQuery对象的语法
document -> js对象； $(document) -> jQuery对象

2.ready方法 - 等待网页中内容加载完成（ 和onload功能一样）

    页面加载完成后才会执行的代码
 })
             
 简写:
 $(function(){
页面加载完成后才会执行的代码
 })

3.DOM操作

1)获取节点

 语法:  $(选择器)
 说明:  选择器 - 和CSS中的选择器一样
( a).普通选择器: 和css一样的

 b.其他特殊情况
 选择器1>选择器2  -  选中选择器中的选择器2对应的直系子标签
 选择器1+选择器2  -  选中紧跟着选择器1的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
选择器~选择器2  -  选中离选择器1最近的选择器2(选择器1和选择器2对应的标签必须是兄弟关系)
 选择器:first  -  第一个选择器
 选择器:last  -  最后一个选择器
 选择器 *:first-child  - 选中选择器中第一个子标签

二、相关操作

1、创建节点（标签）

(1)语法：

$(HTML代码)
例如：$('
<我是一个段落/p>')

//例如：
aNode = $('百度一下')

2、添加节点

(1）节点1.append（jq节点2） -- 在节点1中的最后添加节点2

（2）节点1.prepend（节点2） -- 在节点1的最前面插入节点2

（3)节点1.before -- 在节点1前面添加节点2

(4)节点1.after ---在节点1后面添加节点2

例如：
//1)jq节点1.append（jq节点2）   -- 在节点1中的最后添加节点2
            $('#box1').append(aNode)
            $('#box1').append($(''))
                    
//2)节点1.prepend（节点2）  --  在节点1的最前面插入节点2
            $('#box1').prepend($('
我是标题一
'))
            
            
//3)节点1.before  -- 在节点1前面添加节点2
$('p').before($('
我是段落0
'))
            
//4)节点1.after   ---在节点1后面添加节点2
$('#p1').after($('
我是段落2
'))

3、删除标签

//1)jq对象.remove()      --全部一起删除
$('#box1 p').remove()
            
//只删除一个，通过选择器只选择一个
            
//2)jq对象.empty()   清空指定节点
$('#box1').empty()
            
$('#box1 *').remove()   // '#box1'选中id是box1中的所有后代

4、属性操作

1）特殊属性（标签内容属性）：innrtext，innrhtml，value
//a.html方法（相当于inneHTML）
节点.html（）   -- 获取节点内容
节点.html（值） -- 给节点的内容赋值
//b.text（）方法（相当于innrText）

a = $('#box2>div').html()
console.log(a)
            
//c.val()方法（相当于value）
$('#box2 input').val('小米')
        
2）普通属性
节点.atter(属性名)   -- 获取指定属性的值
节点.atter(属性名，值)   -- 修改指定节点指定属性的值
$('#box2 input').attr('type')
        
            
3）class属性操作
节点.addClass(值)  -- 添加class属性值
$('#h1').addClass('c1')
            
节点.removeClass(值)   -- 移除指定的class值
            $('#h1').removeClass('c2')

5、样式属性

//1）获取样式属性的值
//节点.css(样式属性名)
$('#h1').css('color')
            
//2）修改样式属性的值
//节点.css(样式属性名，值)
            $('#h1').css('color','lawngreen')
            
//节点.css(对象)   -- 同时修改多个样式的值/同时添加多个样式
$('#h1').css({
        'width':'200px',
        'background-color':'red'
        })

6、事件绑定

方法一：直接绑定
节点.on(事件名，事件驱动程序) -- 和js中的addEventLinsenner功能一样
注意：this是js对象，evt是jQuery对象

                
    console.log(this)
   console.log(evt)

方法二：节点.on(事件名，选择器，函数) -- 给指定的节点添加事件，并且将事件自动传递给选择器对应的子标签

$('#box3').on('click','input',function(){
    console.log(this)
    alert(this.value+'被点击')
    })