JavaScript常用的命令, JQuery框架, Ajax异步IO技术等知识详解

js常用的命令, jquery框架, ajax异步io技术

对象模型-bom(browser object model)

文档对象模型-dom(document object model)

语法规范 ecmscripts - 主要使用 es 5.1 (最新是es 8)

1.javascript常用的命令

windonw

alert / promote / confirm

location href / reload() / replace()

history go() / forward() / back()

settimeout()/setinterval()

cleartiameout()/clearinterval()

document

getelementbyid() / tagname() / classname()

queryselector() / queryselectorall()

textcontent (文本)/ innerhtml(文本+标签) / nodevalue(节点)

图片处理, 抠图 

  

  background: url(img/url.jpg) norepeat -95px -15px;位置

事件冒泡和事件捕获

事件冒泡: child --> parent 从下往上传播 (ie)

事件捕获: parent --> child 从上往下传播

阻止事件的传播

evt.stop.propagation(), 事件到此为止, 不再继续传播

evt参数

evt参数表示的是时间对象, 绑定了和事件有关的所有信息, 如果事件回调函数中要用到事件相关的属性和方法, 最好就是指定evt参数

this 时间源, 谁调用函数谁就是事件源

j s 中的三元条件运算

  

  function getstyle(elem) {

      return window.getcomputedstyle ? window.getcomputedstyle(elem) : elem.currentstyle

  }

2.jquery框架

基本命令

  在window.jquery = function () {}绑定

  var $ = window.jquary;

  jquary('#id') = $('#id')

  jquery.noconflict();   //将 $ 函数不用  用 jquery 代替   解决引入多个库的 $ 冲突,   将原来使用 $ 的地方换为 jquery

  $('#id')  选择elem 转化为 jqelem

  jqelem.fadein(1000)   淡入

  jqelem.fadeout(1000)   淡出

  jqelem.on('click', function () {})   绑定事件

  jqelem.attr('class/type/', '设置值');  设置 属性

  jqelem.css('', '')  设置 css  style

  $('#id').one('click', function () {}) 只点击一次  执行函数

  $('#id').each(function (){}) 对选中的p 的每一个执行操作

  $("#id").text('abc')  将字符串作为 #id 标签的的内容写入

          .html('') 加标签 

  $("id").val()    读取该标签里面的值

  // 链式开火车式编程    可以对一个 elem 进行多种方法一次顺序操作  元素还是原来的这个元素

  事件传播

  ???????????????????????????????????

  jquary对象

      不需要考虑浏览器兼容性问题

      jquary 的本质是一个数组 包含着所有的获得的元素

      如果需要将jquary 还原成原生的js对象  - 下标运算可以得到   或  get(index)      

  $(item)

  1. $(function())  绑定该函数是页面加载完成后进行的回调函数

  2. $(selector)   传入的参数是一个选择器  通过选择器获得对应的元素,并将其处理成 3. $(elem)   传入的参数是一个原生 js 对象   event.target / this 

              将原生 js 对象转变为 jqyary 对象  jquary 有更多的属性和方法

  4. $(tag)  传入的是标签   创建标签对应的元素 并处理成 jquary 对象

  查找元素

  - 选择器

    - * / element / #id / .class / selector1, selector2

    - ancestor descendant / parent>child / previous+next / previous~siblings 

  - 筛选器

    - 基本筛选器：:not(selector) / :first / :last / :even / :odd / :eq(index) / :gt(index) / :lt(index) / :animated / :focus

    - 内容筛选器：:contains('…') / :empty / :parent / :has(selector)

    - 可见性筛选器：:hidden / :visible

    - 子节点筛选器：:nth-child(expr) / :first-child / :last-child / :only-child

    - 属性筛选器：[attribute] / [attribute='value'] / [attribute!='value'] / [attribute^='value'] / [attribute$='value'] / [attribute|='value'] / [attribute~='value']

  - 表单：:input / :text / :password / :radio / :checkbox / :submit / :image / :reset / :button / :file / :selected / :enabled / :disabled / :checked

  执行操作

  - 内容操作

    - 获取/修改内容：html() / text() / replacewith() / remove()

    - 获取/设置元素：before() / after() / prepend() / append() / remove() / clone() / unwrap() / detach() / empty() / add()

    - 获取/修改属性：attr() / removeattr() / addclass() / removeclass() / css()

    - 获取/设置表单值：val()

  - 查找操作

    - 查找方法：find() /  parent() / children() / siblings() / next() / nextall() / prev() / prevall()

    - 筛选器：filter() / not() / has() / is() / contains()

    - 索引编号：eq()

  - 尺寸和位置

    - 尺寸相关：height() / width() / innerheight() / innerwidth() / outerwidth() / outerheight()

    - 位置相关：offset() / position() / scrollleft() / scrolltop()

  - 特效和动画

    - 基本动画：show() / hide() / toggle()

    - 消失出现：fadein() / fadeout() / fadeto() / fadetoggle()

    - 滑动效果：slidedown() / slideup() / slidetoggle()

    - 自定义：delay() / stop() / animate()

  - 事件

    - 文档加载：ready() / load()

    - 用户交互：on() / off()

css() 和 attr() 区别

但css()是用来操纵元素style{}的，而attr()是用来操作元素固有的属性的，且attr()的权重比css()要大，它会覆盖css()的样式。

  

  $("#txt").css("display","none")

  $("#txt").css({"display":"none","width":"5px",....})   $("#txt").attr("title","zz")

3.ajax异步io技术

异步获取服务器数据   

( 异步 -不阻塞 ) (同步 - 阻塞  排队等待)

服务器取得相应数据 (json/xml) , 就可以对页面进行局部刷新,就可以在不中断用户体验的前提下刷新页面

瀑布式加载

javascript 发送http请求默认只支持同源策略, 只能取自己网站的数据

如果要跨域取数据 是需要对方提供数据的服务器是支持的

如果对方支持模式   jsonp 

服务器设置 cross-origin: * ; 支持跨域取数据

代码示例, 原生, 无jquary

  

      <body>

          <p id="mm"></p>

          <button id="loadbtn">加载</button>

          <script src="js/jquery1.12.min.js"></script>

          <script>            

              //javascript 发送http请求默认只支持同源策略

              $(function() {

                  $('#loadbtn').on('click', function() {

                      var url = 'https://api.tianapi.com/meinv/?key=30cb00f0e0f6c2f605ba1ebca41c3282&num=2';

                      $.getjson(url, function(obj) {

                          for(var i = 0; i < obj.newslist.length; i += 1) {

                              // $ 就是 jquary 

                              $('#mm').append(

                                  $('<img>').attr('src', obj.newslist[i].picurl).attr('width', '300')

                                  );

                          };

                      });

                  });

              });

          </script>

      </body>

jquery-ajax代码

  

  1. $.getjson(url, function() {}) // 请求成功执行function函数

  2. $.ajax({

      'url':'',

      'type': '' ,

      'data': {

          'key': '',

          'num': ''

      },

      'datatype': 'json',  //默认为json  也可以使用 xml 其他格式

      'success': function(){}  //请求成功 进行的函数

      'error': function(){}  //失拜  执行的函数

      

  })

  ajax 加载图片  瀑布式

  <!doctype html>

  <html>

      <head>

          <meta charset="utf-8">

          <title></title>

      </head>

      <body>

          <p id="mm"></p>

          <button id="loadbtn">加载</button>

          <script src="js/jquery1.12.min.js"></script>

          <script>

              $(function() {

                  $('#loadbtn').on('click', function() {

                      var url = 'https://api.tianapi.com/meinv/?key=30cb00f0e0f6c2f605ba1ebca41c3282&num=2';

                      $.getjson(url, function(obj) {   // obj 通过url 是得到的 jquery对象数组

                          for(var i = 0; i < obj.newslist.length; i += 1) {

                              $('#mm').append(

                                  $('<img>').attr('src', obj.newslist[i].picurl).attr('width', '300')

                                  );

                          };

                      });

                  });

              });

          </script>

      </body>

  </html>