美文网首页
2019-05-21jQuery基础

2019-05-21jQuery基础

作者: 十点半的橙汁 | 来源:发表于2019-05-25 10:42 被阅读0次

一、jQuery介绍

1.什么是jQuery

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

js可以将任何内容转换js对象,例如:document、节点、事件对象
jQuery提供的方法只支持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 id="p1"><我是一个段落/p>')

//例如:
aNode = $('<a href="https://www.baidu.com">百度一下</a>')

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($('<img src="day6-原生js操作/day6-原生js操作/img/luffy.jpg" />'))
                    
//2)节点1.prepend(节点2)  --  在节点1的最前面插入节点2
            $('#box1').prepend($('<h1>我是标题一</h1>'))
            
            
//3)节点1.before  -- 在节点1前面添加节点2
$('p').before($('<p>我是段落0</p>'))
            
//4)节点1.after   ---在节点1后面添加节点2
$('#p1').after($('<p>我是段落2</p>'))

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+'被点击')
    })

相关文章

  • 2019-05-21jQuery基础

    一、jQuery介绍 1.什么是jQuery jQuery本质就是js,它是为了能够更方便的使用js而封装的一个库...

  • 机械设备安装技术

    设备基础种类及应用 垫层基础允许产生沉降:大型储罐 浅基础扩展基础联合基础:轧机独立基础 深基础桩基础:适用于需要...

  • 基础,基础,基础

    如果有人现在问我,JAVA该怎么学,我会告诉他不要急于求成,少看视频,多练,多思考。但说到这里有人可能会反...

  • 【Android】知识点汇总,坚持原创ing

    Android基础 Java基础 Java基础——Java内存模型和垃圾回收机制 语法基础 语法基础——C语法基础...

  • Java 基础

    Java 基础01Java开发入门 Java 基础02Java编程基础 Java 基础03面向对象 Java 基础...

  • 零基础学画画从入门到放弃

    零基础应该怎么学画画?零基础那就从基础开始学啊!基础是什么?造型基础和色彩基础。 造型基础就是用点线面组成起码能让...

  • 面试题汇总

    1.Java基础面试问题 Java基础之基础问题 Java基础之面向对象 Java基础之数据结构 Java基础之I...

  • 基础基础还是基础

    这次去面试,还是被基础给打趴下了。 对于PHP7的新特性没有了解。 对于TP的新特性没有了解。 再一个就是独立完成...

  • 零基础学UI设计需要美术基础吗?

    零基础学UI设计需要美术基础吗?零基础学UI设计需要美术基础吗?零基础学UI设计需要美术基础吗?零基础学UI设计需...

  • 基础基础!

    人生中第一个自主设计的实验方案终于得到认可^O^在设计方案过程中认识到基础知识以及细心的重要性,还有半个学期可以努...

网友评论

      本文标题:2019-05-21jQuery基础

      本文链接:https://www.haomeiwen.com/subject/bcepzqtx.html