jQuery与javascript的区别＋案例 锋芒毕露

• 吼吼
• 轰轰
• • JavaScript的使用

  var first = document.getElementById(‘first’);

  var cls= document.getElementByClassName(‘cls’);

  var li = document.getElementByTagName(‘li’);

  var naName= document.getElementsByName(‘na’);

  var naName = document.getElementsByName(‘na’);

  var queryContent = document.querySelector(‘#a3’);

  var queryContents = document.querySelectorAll(‘li’);

  • jQuery的使用

  console.log(‘jQuery cls’, $(‘.cls’));

  console.log(‘jQuery first’, $(‘#first’));

  console.log(‘nameLi’, $(“li type[name=‘na’]”));

  console.log(‘li’, $(‘li’));

  $(‘ul’ li:first).css(“color”,“red”);//选择第一个

  $(‘ul li:last’).css(“color”,“red”);//选择最后一个

  $(‘ul li:eq(2)’).css(“color”,“red”);// 选择指定的 eq里面的是索引号 从0开始

  $(“ul li:odd”).css(“color”,“red”);//索引号为奇数的元素

  $(“ul li:even”).css(“color”,“red”)//索引号为偶数的元素

  C、操作属性节点的不同：

  JavaScript使用；

  var first = document.getElementById(‘second’).getAttribute(‘id’);

  document.getElementById(‘secone’).setAttribute(‘name’, ‘one’);

  document.getElementById(‘second’).removeAttribute(‘name’);

  jQuery的使用：

  console.log(‘first’,$(‘#first’.attr(‘id’));

  $(‘#first’).attr(‘name’,‘one’);

  $(‘#first’).removeAttr(‘name’);

  D、操作文本节点(innerHTML innerText)

  JavaScript的使用

  innerHTML：获取或添加一个节点的html代码，可以获取css并且是以文本的形式返回

  innerText：获取或设置一个节点的html代码，不能获取css

  value：取到input 标签的值，也就是输入时的值

  • red
• 1
• 2

• 输入：

  // JavaScript 方法

  jQuery的使用

  .html()取到或设置节点中的html代码

  .text()取到或设置节点中的文本

  .val()取到input的value属性值i

  .val(xxx) 设置input的内容

  $(“#txt”).val(‘xxxx’) 设置内容

  $(“#txt”).val() 获取内容

  $(“.box”).html(“

  我是子元素

  ”)//输出 我是子元素

  $(“.box”).text(“

  我是子元素

  ”)//输出

  我是子元素

  E、给一个节点绑定事件

  JavaScript使用：

  document.getElementById(‘aa’).onclick = function (ev) {

  alert(‘hello’);

  }

  jQuery的使用：

  1、绑定简单事件

  $(‘#aa’).click(function () {

  alert(‘hello’);

  })

  2、on绑定事件

  $(‘#aa’).on(‘click’, function () {

  alert(‘你好’);

  }）

  3、绑定多个事件

  $(“button:eq(0)”).on({

  “click”:function () {

  console.log(“1”);

  },

  “mouseover”:function () {

  console.log(“2”);

  },

  “mouseover”:function () {

  console.log(“3”);

  }

  《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 });

  [](()jQuery 中的AJAX

  ==========================================================================

  ajax简介：

  AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

  可以在不刷新整个页面的情况下和服务器进行局部的数据交互。

  类似的功能还有 验证短信的发送、百度搜索的关键字推举、无刷新的分页等等……等都可以使用ajax技术实现。

  语法：

  $.ajax({

  type:‘get/post’,//post和get请求

  url:‘xxxx’,//路径

  data:{

  xx:xx//传递后台的数据

  },

  dataType:‘xx’,