jquery基础

本文转载自https://blog.csdn.net/xiaogeldx/article/details/85467270

JQ简单介绍

• JQ是JS写的插件库，就是一个js文件

• 凡是用jq能实现的，js都能实现，js能实现的，jq不一定能实现

• JQ理念

  • write less，do more

• 在JQ中使用选择器选择元素和在css中使用CSS选择器是一样的,如下：

  111

  
  

  hahaha

  
  #下面的也一样
  #
  #在https://www.bootcdn.cn/jquery/里https://cdn.bootcss.com/jquery/3.3.1/jquery.js复制到本地或者直接引用
  

JQ基本使用

JQ基本使用1

修改内容

• html（）相当于JavaScript的innerHTML

• text（）相当于JavaScript的innerText

  
  
  • 1
  
  
  • 2
  
  
  • 3
  
  
  • 4
  
  
  
  
  
  

转换

• get()/[]：jq对象使用js方法

  var p1 = document.getElementById('p1');
  $(p1).html('hahaha');

• $()：js对象使用jq方法

  $('.p2')[0].innerText = 'hengheng'; //两种方法效果一样，索引表示第几个
  $('#p1').get(0).innerText = 'hengheng';

点击

• click()

  $("#btn").click(function () {
  alert("qew");
  })

鼠标

• hover()

  //当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
  　$("#p1").hover(function () {
  console.log("移入")
  },function () {
  console.log("移出")
  })

追加

• append()

  $("#p1").append("我是被追加进来的") //加到后面

添加

• prepend()

  $("#p1").prepend("我是被添加进来的“) //添加到前面

前后

• before()

• after()

  $("#p1").before("我是他哥哥"); //加到上一行
  $("#p1").after("我是他兄弟"); //加到下一行
  

移除

• empty() 清空

• remove() 移除

  $("div").empty() // 清空里面的内容，保留自己属性
  

  $("div").remove() // 移除自己和下面子集的所有
  

JQ的基本使用２

操作属性

• attr()

• removeAttr()

  alert($("#p1").attr("id")); //返回属性值
  $("#p1").attr("a","b") //添加/修改属性，无则增，有则改
  $("#p1").attr({
  "a":"b", //注意符号
  "class":"d"
  });
  $(".d").removeAttr("a"); //移除

添加/移除class

• addClass()

• removeClass()

  $("#div1").addClass("div3"); //写多个也可以加多个
  $("#div1").addClass("div4"); //写多个也可以加多个
  $("#div1").removeClass("div3") //移除
  $(".div3").removeClass("div3") //同上

判断

• hasClass() 看是否存在该css

  
  alert($(".div12").hasClass("div12")); //hasClass中添属性值
  alert($("#div1").hasClass("div12")); //返回结果都是true

索引

• each() each() 方法为每个匹配元素规定要运行的函数

• index() 索引 相当于jq的indexOf()

  $("ul li").each(function (i) {
  $(this).html("我是第"+i+"个") //this表示当前标签
  })
  alert($("#li2").index()); //2，查索引

滚动条事件

• scroll()

• scrollTop()

• scrollLeft()

  $(window).scroll(function () {
  console.log($(document).scroll());
  console.log($(document).scrollLeft()); //左右
  console.log($(document).scrollTop()); //上下
  })

JQ基本使用３

父子元素

• parent
• children()

兄弟

• siblings

后代

• find

祖宗(父级之上)

• parents

  
  
  

  
  
  
  
  
  
  
  

  
  

  
  

  
  

  222