一、函数变量的作用域

1.变量的作用域实在声明时决定的而不是调用执行时决定

<script>
var a=6,b=7;
function t() {
// var a=3,b=5;
console.log(a+'--'+b);
}
t();
</script>

2.作用域

<script>
var a=8,b=9;
function sum() {
// var a=3,b=5;
function p() {
// var a=4,b=6;
console.log(a+b);
}
p();
}
sum();
</script>

二、词法分析

1.函数执行前,会进行预编译,这个预编译的过程就是词法分析
会形成一个活动对象,Active Object AO
分析三个内容:
1.分析函数的参数
2.分析函数的变量声明
3.分析函数内函数声明表达式

var str ='global';
function t() {
console.log(str); // unfined
var str = 'local';
console.log(str); // local
}
t();
-----------------------------------------------------
<script>
function t(age) {
console.log(age);
var age = 99;
console.log(age);
function age(){
}
console.log(age)
}
t(5);
//预编译,activeobject AO
/*
* 1.分析函数参数
* AO.age = undefined
* 1.2 AO.age = 5
* 2.分析函数变量
* 因为AO有age变量,所以不做任何处理(没有的话就赋值)
* 3.函数声明表达式
* AO.age = function age(){}
* */
</script>

三、jQuery

DOM:

1.直接查找
  document.getElementById 根据ID获取一个标签
  document.getElementsByName 根据name属性获取标签集合
  document.getElementsByClassName 根据class属性获取标签集合
  document.getElementsByTagName 根据标签名获取标签集合
2.间接查找
  parentNode // 父节点
  childNodes // 所有子节点
  firstChild // 第一个子节点
  lastChild // 最后一个子节点
  nextSibling // 下一个兄弟节点
  previousSibling // 上一个兄弟节点

  parentElement // 父节点标签元素
  children // 所有子标签
  firstElementChild // 第一个子标签元素
  lastElementChild // 最后一个子标签元素
  nextElementtSibling // 下一个兄弟标签元素
  previousElementSibling // 上一个兄弟标签元素

1.jQuery是什么

  jQuery:帮我们封装好了DOM操作,相当于python中的模块(类库)

2.jQuery的特点

  1.强大的选择器---类似与css的选择器
  2.强大的DOM操作
  3.Ajax封装
  4.版本兼容行好

3.jQuery版本:

  1.xxx --- 1.12.4(1.12大版本)
  2.xxx
  3.xxx

4.选择器

------基本选择器
ps:
  jQuery --> DOM
    $("#test")[0]
  DOM --> jQuery
    var mydom = document.getElementById('test')
    $(mydom)
1.ID选择器
  $('#test') == document.getElementById('test')
2.标签选择器
  $('div') == document.getElementsByTagName('div')
3.class选择器
  $('.class') == document.getElementsByClassName("class")
4.组合选择器
  $('div,span')

------层级选择器
1.祖先--子孙 *有疑问(括号中是否可以是上面选择器中的任意)
$('form input')
2.parent > childNodes 只找儿子
$(' form > input')

------基本筛选器
:first 获取匹配的第一个元素
$('li:first') 获取li标签的第一个元素
:last 获取匹配的最后一个元素
$('li:last') 获取li标签的最后一个元素
:eq(n) 获取匹配的第n个元素
$('li:eq(3)') 获取li标签的第4个元素

------属性选择器
<input type="text" name="username"/>
$('input[type="text"]')

5.jQuery的方法
1.$(this) 相当于js中的this
2.each 相当于循环操作
3.prop 给标签设置属性,例 $(this).prop('checked',true)
给一个参数为获取值,两个值为设置值

4.三元运算

  例: 4 > 3 ? true : false

5.筛选器

  1.next() 获取紧邻的下一个元素
    nextAll()
    nextUtil('.content1') 直到XXX停止
  2.prev() 获取紧邻的上一个元素
    prevAll()
    prevUtil('.content1') 直到XXX停止
  3.children() 获取所有的子元素
    $('.info').children() ---获取所有的子元素
    $('.info').children('.content2') ---获取指定的子元素
  4.parent() 获取父元素
    $('content2').parent()
  5.siblings() 获取兄弟元素
    $('content2').parent().children('.content2').siblings()

5.设置样式

  css() 传一个参数为获取值,传两个值为设置值
  css('display')
  css('display','block')

6.动画  

  1.$('img').show(1000) 显示隐藏的 1000为慢慢显示
  2.$('img').hide(1000) 隐藏显示的 1000为慢慢隐藏
  3.$('img').toggle('slow') 显示隐藏,隐藏显示。slow变慢
  更多:http://jquery.cuishifeng.cn/

7.样式

  1.$("XXX").css("display",none) 设定样式
  2.addClass() 添加样式(要求样式存在,即写在css里面)
  3.removeClass() 移除样式(同上)
  4.hasclass() 判断有没有样式

8.文本操作

  1.设置text的值
    $('xxx').text() 不传参为获取
    $('xxx').text('helei') 传参为设置
  2.input系列框里边的值(同上)
    $('xxx').val()
    $('xxx').val('helei')

9.属性操作

    $('xxx').attr(""); 属性选择器,传一个参数为取值
    $('xxx').attr("",""); 属性选择器,传两个值为赋值
    $('xxx').removeAttr('key') 输入属性的key,可以删除属性

    在操作关于input系列(radio,checkbox) 选中和取消不能采用attr来进行设置
    3版本修复了这个bug
    prop()专门是用来对input系列(radio,checkbox)
      $('xxx').prop()

10.文档操作

  append() 向选中的元素内部的后面添加元素
    $("ul").append($("<li>某某某</li>"))
  appendTo() 把元素插到某个元素的后面
    $("<li>某某某</li>").appendTo($("ul"))

  prepend() 向选中的元素内部的前面添加元素
  prependTO() 把元素插到某个元素的前面

  外部插入
    after() 向选中元素外部的后面添加元素
    before() 向选中元素外部的前面添加元素

  删除
    empty() 将元素内部的内容删除
    remove() 将元素的标签删除

11.表单对象属性

  :enabled 匹配所有可用元素
  :disabled 匹配所有不可用元素
    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>
  $("input:disabled")
  [ <input name="email" disabled="disabled" /> ]
  :checked 匹配所有选中的被选中元素(复选框、单选框等,select中的option),对于select元素来说,获取选中推荐使用 :selected
  :select 匹配所有选中的option元素

12.事件

  DOM:
    onclick
    onblur
    onfocus
    ondblclick
    onmousedown
    onmouseover
    onkeydown
    onkeyup

  jquery:
    click
    blur
    focus
    dblclick
    mousedown
    mouseover
    keydown
    keyup

13.绑定事件的其他方式

  $('xxx').on("click",function(){})
  $('xxx').off("click",function(){})

  $('xxx').bind("click",function(){})
  $('xxx').unbind("click",function(){})

  $('xxx').delegate('xxx','click',function(){})
  $('xxx').undelegate('xxx','click',function(){})

14.阻止事件发生:

  return false

jQuery简介和基础的更多相关文章

  1. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  2. jQuery 简介

    jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中. jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...

  3. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  4. WEB入门之十二 jquery简介

    学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...

  5. jQuery和AJAX基础

    jQuery和AJAX基础 jQuery 基础: 1.jQuery 选择器: 元素选择器:$("p"): #id 选择器:$("#test"): .class ...

  6. APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例

    前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...

  7. jQuery简介

    jQuery简介 jQuery是继Prototype之后的又一个javascript库,它由John Resig创建于2006年1月. Javascript库作用比较: 1. Prototype(ht ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. jQuery简介<思维导图>

    jQuery是继prototype之后有一个优秀的Javascript库,它由John Resig创建于2006年1月.它简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.它独特 ...

随机推荐

  1. V7000数据恢复(存储文件系统损坏)案例_北亚数据恢复

    我们今天介绍的数据恢复案例是一起 v7000存储文件系统损坏导致的数据丢失,首先简单介绍一下设备基本情况:发生文件系统损坏的是一台挂载在Windows2003服务器上的v7000存储,划分了一个容量为 ...

  2. WebAPI 跨域解决方案.

    先下载支持跨域的.dll,然后using System.Web.Http.Cors. 我把webapi解决方案部署到IIS上了.测试过后可以解决跨域. 方案一(用了*号,这样有安全隐患.): 直接在w ...

  3. jQuery 文档操作之prepend() 和prependTo()方法.

    //prepend() $("#btnpre").click(function(){ //该方法在被选元素的开头(仍位于内部)插入指定内容. $("div"). ...

  4. Mybatis框架入门

    Mybaits框架 一.什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了googl ...

  5. EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序

    说明一下: 当点击 datagrid 表头某一列的小三角图标时,easyui 本身是有排序的,但是在当我们对 datagrid 进行了分页的情况下,点击排序只是对当前页的数据进行排序,而需求需要我对数 ...

  6. vue+mint-ui的微博页面(支持评论@添加表情等)

    github地址 https://github.com/KyrieZbw/Sneakers (如果觉得不错就给个小星星) 预览地址 页面展示 技术栈 vue2 + vuex + vue-router ...

  7. Python内置函数(30)——super

    英文文档: super([type[, object-or-type]]) Return a proxy object that delegates method calls to a parent ...

  8. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

  9. mosquitto安装和测试

    一.安装 1.windows安装 安装完毕,更新安装目录的dll文件 2.linux安装 编译保存用户数据到数据库的插件 安装 3.启动 mosquitto mosquitto mosquitto_p ...

  10. ASP.NET Web API编程——序列化与内容协商

    1 多媒体格式化器 多媒体类型又叫MIME类型,指示了数据的格式.在HTTP协议中多媒体类型描述了消息体的格式.一个多媒体类型包括两个字符串:类型和子类型. 例如: text/html.image/p ...