jQuery高级部分笔记

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') {// 如果是第一个 提示  索引值==0if ($(this).parent().index() == 0) {alert('已经是第一个了')return}$(this).parent().insertBefore($(this).parent().prev())}else if (myClass == 'down') {// 如果是最后一个提示一下 ：index == 长度-1// 后面没有其他标签最后一个了：后面人地 长度是0if ($(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  posttype: 'get',// 返回的数据格式  jsondataType: 'json',// data:发送给接口的数据success: function (dat) {// 请求成功之后要执行的回调函数// 得到数据，并在页面显示数据console.log(dat) },error: function () {// 请求失败alert('请求失败')}})})</script>

jQuery高级部分笔记相关推荐

JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jquery高级之妙味云课堂笔记
jquery高级基础方法扩充: get:下标和length属性 outerWidth:针对隐藏元素和参数true text():合体的特例 remove():detach() ():():(docu ...
NDK 高级编程(笔记)
Android 开发中针对 NDK 的书籍很少,<Pro Android C++ with the NDK>也是出版的比较早的一本书,有些内容可能对现在的开发并不适用.但是书中介绍的内容比 ...
Java高级技术笔记
Java高级技术笔记 URL地址 HTTP协议开发工具 Java开发工具包(JDK) JSP引擎 MyEclipse IDEA 工具集成 C/S架构是Client/Server的简写,也就是客户机/ ...
mysql高级笔记_MySQL高级部分笔记
有关于MySQL的高级部分笔记这是一篇关于MySQL高级部分的笔记主要是,sql优化以及mysql锁的相关内容,以及主从配置等内容等比较基础的优化一.逻辑架构部分逻辑架构逻辑架构介绍图如下连 ...
java day45【JQuery 高级：动画，遍历，事件绑定，案例，插件】
第一章 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速 ...
jQuery开发经验实例笔记
jQuery开发经验实例笔记 jQuery获取文件选择输入框的扩展名 var file=$("input[name='file']").val() var filename=fil ...
谷歌学术高级检索笔记-检索逻辑和技巧
谷歌学术高级检索笔记-检索逻辑和技巧前言谷歌学术在理工科的科研工作中重要性不言而喻,通过检索关键词快速定位研究目标是必要的,但其检索方法或检索逻辑却少有资料,太多重复或错误的资料不便于实际检索.本 ...
谷粒商城--订单服务--高级篇笔记十一
1.页面环境搭建 1.1 静态资源导入nginx 等待付款 --------->detail 订单页 --------->list 结算页 --------->confirm 收银页 ...