jquery如何将一个数组加到另一个数组 jquery 数组转字符串_jQuery


jQuery 简介

  • jQuery是一个高效、精简并且功能丰富的JavaScript工具库
  • 发明者 John Resig
  • 2006年一月，jQuery正式发布
  • query 本身是选择的意思，主要对 JavaScript中的选择元素的方法进行了大量的优化。

版本发展

  • 1.X：兼容 IE6/7/8，是工作中最常使用的，学习 1.12 版本。
  • 2.X：不兼容 IE6/7/8，多用于 jQuery 官方调整 bug 使用。工作中不使用。
  • 3.X：不兼容 IE6/7/8，只能在高版本浏览器中使用，是现在 jQuery 官方主要的维护升级的版本。

使用 jQuery 过程，可以参考 API 应用手册

  • jQuery 确实极大的简化了 DOM 操作，让编程变得更加简单高效。

jQuery 常见操作

  • $()方法
  • 在 DOM 操作中，基本都是从获取元素开始的
  • jQuery 中封装了一个更加强大的获取元素方法 $()
// 获取元素
var box = document.getElementById("#box")
var box = document.getElementsByTagName("div")[0]
// JQ 中获取元素
  $(".box")
  $("#box")
// 获取 css 样式，并设置
console.log($("#box").css("width"))
$(".box").css("width",200)
// 事件简化
$(".box").click(function () {
$(this).css("background-color","skyblue")
 })
// 运动方法
    $(".box").animate({"width": 500},1000)


$() 方法

  • 在 jQuery 中，只有一个全局变量 $,这是 jQuery 的一大特点，避免了全局变量的污染。
  • 最开始变量不叫做 $，叫做 jQuery() 方法，在库中两个名字是并存的，都可以使用。
  • 经典错误：$ 未定义
<body>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <p>段落4</p>
  <p>段落5</p>
  <p>段落6</p>
  <p>段落7</p>
  <p>段落8</p>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script>
    // 获取元素
    $("p").css("background-color","red")
    // jQuery("p").css("background-color","red")
  </script>
</body>


jQuery 对象

  • $() 方法获取到的内容叫做 jQuery 对象
  • 内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是jQuery 对象的方法。
  • 通过 $() 获取的元素是一组元素，进行操作时是批量操作。
// 通过 $() 方法获取到的 是 JQ 对象
    // 获取的是一组 html 的元素，会进行批量操作
    $("p").css("background-color","pink")
    $("p").html("你好")
    $("p").animate({"width": 300},1000)
// jQuery 对象是不能使用原生 JS 对象的方法的
    console.log($("p").innerHTML)
    $("p").style.backgroundColor = "red"
// 原生 JS 对象也不能使用 JQ 对象的方法
    var ps = document.getElementsByTagName("p");
    ps[0].html("haha")
// 打印输出一下 JQ 对象
    console.log($("p"))


jQuery 对象和原生 js 对象

  • jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法。
  • 原生 JS 对象也不能使用 jQuery 的方法。
  • jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的jQuery 的方法和属性。

jQuery 对象中原生 js 对象的个数

  • $().length
  • $().size()
// 获取 JQ 对象内部 原生 JS 对象的个数
    console.log($("p").length)
    console.log($("p").size())


互相转换

  • jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。
  • 原生转 jQuery：将原生对象用 $() 方法包裹即可。
// JQ 对象转换为 原生 JS 对象
    var $ps = $("p")
    $ps[0].innerHTML = "你好"
// 原生 JS 对象 转换为 JQ 对象
    var op = document.getElementsByTagName("p")[0]
    $(op).css("background-color","skyblue")


jQuery 选择器

  • CSS2.1 和 CSS3 选择器
  • 参数：必须是字符串格式的选择器。
// 基础选择器
    // $("*")
    // $("p")
    // $(".box")
    // $("#demo")
    // 高级选择器
    // $(".box p").html("你好")

    // 表单对象属性
    // $("input:disabled").css("background-color","red")
    // $("input:enabled").css("background-color","red")
    // 表单
    // $(":input").css("background-color","red")
    $(":text").css("background-color","red")


  • 筛选选择器
  • 也叫过滤选择器，jQuery 中新增的自己的选择器。
  • 用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。或者可以作为高级选择器的一部分。
  • 常用：
    $(":first") 第一个
    $(":last") 最后一个
    $(":eq(index)") 下标为 index 的项
    $(":gt(index)") 大于下标为 index 的项
    $(":lt(index)") 小于下标为 index 的项
    $(":odd") 下标为奇数的项
    $(":even") 下标为偶数的项
    $(":not(selector)") 去除所有与给定选择器匹配的元素

筛选方法

  • 也叫过滤方法，jQuery 中除了用选择器选择元素，jQuery 对象内还封装了一些对应的筛选方法。
  • 常用：

$("p").first()

$("p").last()

$("p").eq(3)


// 筛选选择器
    // $("p:first").css("background-color","pink")
    // $("p:last").css("background-color","skyblue")
    // $("p:eq(5)").css("background-color","skyblue")
    // $("p:gt(5)").css("background-color","skyblue")
    // $("p:lt(5)").css("background-color","skyblue")
    // $("p:odd").css("background-color","skyblue")
    // $("p:even").css("background-color","skyblue")
    // $("p:not(:eq(6))").css("background-color","skyblue")
    // $("p:not(.para)").css("background-color","skyblue")

    // 筛选方法
    // $("p").first().css("background-color","skyblue")
    // $("p").last().css("background-color","skyblue")
    $("p").eq(4).css("background-color","skyblue")


隔行变色案例


// 原生方法
    // var trs = document.getElementsByTagName("tr");
    // // 遍历
    // for (var i = 0 ; i < trs.length ; i+=2) {
    //   trs[i].style.backgroundColor = "skyblue"
    // }

    // jQuery的方法
    $("tr:even").css("background-color","yellowgreen")