jquery学习笔记

  • jQuery简介:
    jQuery 是一个快速、小且功能丰富的 JavaScript 库
    jquery是一个JavaScript库,就是一个js文件,里面封装了大量的函数,最终返回对象

  • jQuery特点:
    写的少,做的多(Write Less,Do More)
    链式编程,隐式迭代,插件丰富,开源,免费

  • jQuery核心对象:jQuery()或者$() 函数也是对象。jQuery.属性 或者jQuery.方法() 或者 $.属性 $.方法()
    jQuery中的核心对象就是jQuery(简称为:$),实际上jQuery就是$,他们都是函数(函数也是对象)。

  • jQuery核心函数: $(param)

  1. 作为函数调用
    参数是字符串(选择器): $('字符串') -> $('button') 查找并匹配标签,封装成jQuery对象
    参数是DOM对象: $(DOM对象)-> $(document)将DOM对象封装成jQuery独享
    参数是html标签: $(html标签) -> $(<p></p>) 创建标签对象,封装成jQuery对象
    切记:jQuery中this是DOM对象,如果要使用则需要转jQuery对象

  2. 作为对象使用
    $.each():遍历数组及对象的
    $.trim() : 去除字符串两端空格的

  • HTML部分
<style type="text/css">
  div {
    width: 300px;
    height: 200px;
    border: 1px solid red;
  }
</style>
<button id="btn">按钮</button>
<div id="dv"></div>
// 点击按钮显示当前按钮中的文字内容,同时创建一个文本框,
// jQuery对象.html()--->相当于DOM中innerHTML

$(function(){
  // 获取按钮,调用点击事件
  $('#btn').click(function(){
    console.log($(this).html());
    // 主动向目标元素插入inuput标签
    $('<input type="text" />').appendTo($('#dv'));
    // 目标元素被动插入inuput标签
    $('#dv').append($('<input type="text" />'));
  })
})

// 遍历数组,jQuery中的对象下的方法来进行遍历
let arr=[1,2,3,3,4]
$.each(arr,function(index,item){
  console.log(index,item);
})

// 遍历对象
var obj = {
  name: '小明'
}
$.each(obj, function (key, value) {
  console.log(key, value)
})

// 干掉字符串两边的空格
console.log('===='+$.trim(' 我的天 ')+'======');
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容