jQuery高级部分笔记

最新推荐文章于 2024-04-19 15:27:36 发布

Vince Li

最新推荐文章于 2024-04-19 15:27:36 发布

阅读量162

点赞数

分类专栏：前端文章标签： jQuery JavaScript

本文链接：https://blog.csdn.net/weixin_43250623/article/details/90381737

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery

事件冒泡

什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，返回一个false即可

  
   <script src="./js/jquery-1.12.4.min.js"></script>
   <script>
       $(function () {
           $(document).click(function(){
               alert('document')
                return false //阻止事件冒泡
           })
           $('.da').click(function () {
               alert('da')
                return false //阻止事件冒泡
           })
           $('.zhong').click(function () {
               alert('zhong')
                return false //阻止事件冒泡
           })
           $('.xiao').click(function () {
               alert('xiao')
               return false //阻止事件冒泡
           })
       })
   </script>
   <!--html部分-->
   <div class="da">
       <div class="zhong">
           <div class="xiao"></div>
       </div>
   </div>

事件委托:

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操

事件委托的用法
关键字:delegate

$(选择器).delegate(事件委托对象,事件类型，匿名函数命令及事件触发后执行的函数)
事件委托的好处
- 可极大减少事件绑定次数，提高性能
- 可让动态加入的子元素绑定相同的命令

    <script>
        $(function () {
            // 把子级li元素的单击事件委托在父级ul身上,点击事件触发后弹窗
            $('ul').delegate('li', 'click', function (event) { 
                // this 表示当前单击的元素
                alert($(this).html())
            })
        })
    </script>
    <!--html部分-->
   <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
    </ul>

DOM操作

1. DOM 文档对象模型 document object model

js内置的一个结构化表现手法，通过这个结构化表现手法把所有的标签实现了一个倒置的树状结构图

2. 节点 (node)

标签(html)元素(javascript)节点(dom)

节点与节点的关系：

同级关系
子级关系

3.节点常用操作

追加节点

首先要创建节点，再把新创建的节点追加到指定位置
- 在子级位置追加
  - append() ：在子级的尾部追加
    
    $(选择器).append(新建节点)
  - appendto() : 在子级的尾部追加
    
    $(新建节点).appendto(目的地)
  - prepend() ：在子级的首部追加
    
    $(选择器).prepend(新建节点)
  - prependto() : 在子级的首部追加
    
    $(新建节点).prependto(目的地)
- 在同级位置追加
  - after() ：在同级的下面追加
    
    $(选择器).after(新建节点)
  - insertAfter() : 在指定节点的后面追加
    
    $(新建节点).insertAfter(目的地)
  - before() ：在同级的前面追加
    
    $(选择器).before(新建节点)
  - insertBefore() : 在指定节点的前面追加
    
    $(新建节点).insertBefore(目的地)
移动节点

首先找到要移动的节点，在把节点插入到指定位置
- insertAfter() ：移动到指定位置的后面
  
  $(选择器).insertAfter(目的地)
- insertBefore() ：移动到指定位置的前面
  
  $(选择器).insertBefore(目的地)
删除节点 remove()

$(选择器).remove()
清空节点empty()

$(选择器).empty()

4.节点操作案例

	<script type="text/javascript">
		$(function () {
			// 增加按钮单击 -- 获取用户输入的数据放到li节点里面，追加到页面
			var $btn1 = $('#btn1')
			// var str = ''
			$btn1.click(function () {
				var vals = $('#txt1').val()
				// alert(vals)
				// str = ''
				if (vals == '') {
					alert('请输入内容')
					return
				}
				var $li = $('<li><span>' + vals + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')
				// 子级前面追加
				$li.prependTo($('#list'))
			})

		
			$('#list').delegate('a', 'click', function () {
				// alert(2)
				// 不同的a有不的功能，看class属性的值 -- if  得到class属性的值
				var myClass = $(this).prop('class')
				if (myClass == 'del') {
					// 删除的是自己的父li
					$(this).parent().remove()
				}
				else if (myClass == 'up') {
					// 如果是第一个 提示  索引值==0
					if ($(this).parent().index() == 0) {
						alert('已经是第一个了')
						return
					}
					$(this).parent().insertBefore($(this).parent().prev())
				}
				else if (myClass == 'down') {
					// 如果是最后一个提示一下 ：index == 长度-1
					// 后面没有其他标签最后一个了：后面人地 长度是0
					if ($(this).parent().nextAll().length == 0) {
						alert('已经是最后一个了')
						return
					}
					$(this).parent().insertAfter($(this).parent().next())
				}
			})
		})

	</script>

javascript对象

js中使用对象的方式与python一样，但是创建对象的语法不同

js对象创建及使用
- 创建方式1
  
  var 变量名=new object()
- 创建方式2
  
  var 变量名={key1:值1,key2:值2}
js对象体验

    <script>
        // 创建方式1
        // var person1 = new Object()
        // person1.name = 'laowang'
        // person1.say = function(){
        //     // 说自己的名字
        //     // alert( person1.name )
        //     alert( this.name )
        // }
        // alert( person1.name )
        // person1.say()


        //创建方式2 
        var person1 = {
            name: 'xiaoming',
            age: 10,
            say: function () {
                //this 表示当前对象
                alert(this.age)
            }
        }
        alert(person1.name)
        person1.say()
    </script>

JSON数据格式

JSON是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法,是目前主流的数据格式，主要用于与服务端数据交换

JSON数据格式定义

{"key1":值1，"key2":值2...}
- JSON 中的键对应的值是没有函数方法的
- JSON中的键名称和字符串值需要用双引号引起来
```
{
    "name":"tom",
    "age":18
}
```
json字符串， json对象与js对象的区别
- javascript对象：javascript中，除开JavaScript原始值(字符串，数字，布尔值，null，正则表达式)的都是javascript对象
- JSON对象：可以理解为使用基于JSON语法格式的javascript对象
- JSON字符串：符合JSON语法格式的字符串

ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

ajax技术的目的

是让js发送http请求，实现与服务端通信，即数据交互
ajax的两个主要好处
- 异步请求
- 局部刷新(无刷新)
- ajax不支持访问本地文件
- 不支持连接操作数据库
数据接口：
数据接口是后台提供的，是一个url地址，通过访问该url，实现对服务端数据的增删改查操作，服务端一般返回的的数据以json格式封装
ajax请求格式

    <script>
        $(function () {
        //ajax基础用法
        
            $.ajax({
                // ajax的参数
                // 请求数据的地址：接口地址  名字
                url: '/index_data',
                // 请求数据方式：get  post
                type: 'get',
                // 返回的数据格式  json
                dataType: 'json',
                // data:发送给接口的数据
                success: function (dat) {
                    // 请求成功之后要执行的回调函数
                    // 得到数据，并在页面显示数据
                    console.log(dat) 
                },
                error: function () {
                    // 请求失败
                    alert('请求失败')
                }
            })
        })
    </script>