Day25 js应用 & jQuery & Ajax

1 事件的冒泡和捕获

• .事件冒泡：作用于子标签的事件会传递给父标签； 如果希望作用于子标签的事件不传递给父标签，需要在子标签中对事件进行捕获
• 事件捕获: 事件对象.stopPropagation()

实现城市下拉菜单

动态添加背景

安妞切换效果

    
        
        
        
    
    
        扫码登录
        账号登录
        微信登录
        QQ登录
        
        

            
        
        
        
    

practice : 网页安妞切换

    
        
        
        
    
    
        

            网页
            视频
            图片
            科技
            新闻
            动漫
            音乐
        
        
        
        
    

2 jQuery 基础

2.1 jQuery简介

• jQuery本质就是js，它是为了能够更方便的使用js而封装的一个库
• 如果想要使用jQuery必须先导入jQuery的js文件
• js可以将任何内容转换js对象，例如:document、节点、事件对象
• jQuery提供的方法只支持jQuery对象
• 在jQuery中() -> 创建jQuery对象的语法
• document -> js对象； $(document) -> jQuery对象

2.2 ready方法 - 等待网页中内容加载完成

• 和onload功能一样
• 语法：
  (function(){
  页面加载完成后才会执行的代码})

2.3 节点操作

2.3.1 获取节点

• 语法: $(选择器)
• 说明: 选择器 - 和CSS中的选择器一样

2.3.2 选择器

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

    
        
        
        
        
        
        
        
        
    
    
        
        
        
        
我是段落1
        

            
我是段落2
            

                我是超链接
                
我是段落3
                
我是段落4
                
                    
我是段落5
                
                
我是段落6
            
        
        
我是段落2
        
        
           
    

2.3.3 创建节点

语法:
("

我是一个段落

")

2.3.4 添加节点

• jq节点1.append(jq节点2) - 在节点1中的最后添加节点2
• 节点1.prepend(节点2) - 在节点1的最前面插入节点2
• 节点1.before(节点2) - 在节点1的前面插入节点2
• 节点1.after(节点2) - 在节点1的后面插入节点2

2.3.5 删除标签

• jq对象.remove() - 删除指定节点
• jq对象.empty() - 清空指定节点

2.4 属性操作

2.4.1 标签内容属性: innerHTML、innerText、value

• html方法(相当于innerHTML)
  • 节点.html() - 获取节点内容
  • 节点.html(值) - 给节点内容赋值
• text()方法(相当于innerText)
• val()方法(相当于value)

2.4.2 普通属性

• 节点.attr(属性名) - 获取指定节点指定属性的值
• 节点.attr(属性名,值) - 修改指定节点直接属性的值
• class属性
  • 节点.addClass(值) - 添加class属性值
  • 节点.removeClass(值) - 移除指定的class值

2.4.3 样式属性

• 获取样式属性的值 节点.css(样式属性名)
• 修改样式属性的值 节点.css(样式属性名,值)
• 节点.css(对象) - 同时设置多种样式

2.4.4 事件绑定

• 方法一：直接绑定
  • 节点.on(事件名,函数) - (和js中的addEventLinsenner功能一样)
  • 注意: this是js对象，evt是jQuery对象
  • evt是事件对象不是节点对象，所以获取属性的时候以对象获取属性的方式来获取console.log(evt.clientX, evt.clientY)
• 方式二:
  • 节点.on(事件名,选择器,函数) - 给指定节点绑定指定事件， 并且让节点中选择器对应的子标签对事件做出反应

    
        
        
        

        
    
    
        
        
        

            
我是段落
        
        
        
        

            
我是标题0
            

                
我是标题1
            
            

            
        
        
        
        暂停
        

            
            
        
        
        
        
        
    

2 Ajax请求

practice： 周公解梦

    
        
        
        
        
        
        
    
    
        

            

                
                查询