1 jQuery核心函数

* 简称: jQuery函数($/jQuery)

* jQuery库向外直接暴露的就是$/jQuery

* 引入jQuery库后, 直接使用$即可

* 当函数用: $(xxx)

* 当对象用: $.xxx()

1.1理解

即: $ 或 jQuery

jQuery定义了这个全局的函数供我们调用,它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同,也可作为对象调用其定义好的方法, 此时$就是一个工具对象。

1.2作为一般函数调用: $(param)

1)参数为函数:当DOM加载完成后,执行此回调函数。例:$(fun)

2)参数为选择器((selector))字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象。例:$("#div1")

3)参数为DOM对象: 将dom对象封装成jQuery对象。例:$(div1Ele)

4)参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象。例:$("<div>")

1.3作为对象使用: $.xxx()

1) 发送ajax请求的方法:

$.ajax()、 $.get()、$.post()···

2)其他工具方法:

$.each() : 隐式遍历数组

$.trim() : 去除两端的空格

$.parseJSON()

···

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
   需求2. 遍历输出数组中所有元素值
   需求3. 去掉"  my atguigu  "两端的空格
   */
  /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
  //1.1). 参数为函数 : 当DOM加载完成后,执行此回调函数
 
$(function () { // 绑定文档加载完成的监听
    // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
   
$('#btn').click(function () { // 绑定点击事件监听
      // this是什么? 发生事件的dom元素(<button>)
      // alert(this.innerHTML)
      // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
     
alert($(this).html())
      // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
     
$('<input type="text" name="msg3"/><br/>').appendTo('div')
    })
  })
  /*需求2. 遍历输出数组中所有元素值*/
 
var arr = [2, 4, 7]
  // 1). $.each() : 隐式遍历数组
 
$.each(arr, function (index, item) {
    console.log(index, item)
  })
需求3. 去掉"  my atguigu  "两端的空格
  // 2). $.trim() : 去除两端的空格
 
var str = ' my atguigu  '
 
// console.log('---'+str.trim()+'---')
 
console.log('---'+$.trim(str)+'---')
</script>

2jQuery核心对象

* 简称: jQuery对象

* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

* 使用jQuery对象: $obj.xxx()

2.1理解

即执行jQuery核心函数返回的对象,jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象(可能只有一个元素),jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作dom

2.2.属性/方法

1)基本行为

* size()/length: 包含的DOM元素个数

* [index]/get(index): 得到对应位置的DOM元素

* each(): 遍历包含的所有DOM元素

* index(): 得到在所在兄弟元素中的下标

2)属性:操作内部标签的属性或值

3)CSS:操作标签的样式

4)文档:对标签进行增删改操作

5)筛选:根据指定的规则过滤内部的标签

6)事件:处理事件监听相关

7)效果:实现一些动画效果

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  
需求:
   需求1. 统计一共有多少个按钮
   需求2. 取出第2个button的文本
   需求3. 输出所有button标签的文本
   需求4. 输出'测试三'按钮是所有按钮中的第几个
   */
  //需求1. 统计一共有多少个按钮
 
var $buttons = $('button')
  /*size()/length: 包含的DOM元素个数*/
 
console.log($buttons.size(), $buttons.length)
  //需求2. 取出第2个button的文本
  /*[index]/get(index): 得到对应位置的DOM元素*/
 
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
  //需求3. 输出所有button标签的文本
  /*each(): 遍历包含的所有DOM元素*/
  /*$buttons.each(function (index, domEle) {
    console.log(index, domEle.innerHTML, this)
  })*/
 
$buttons.each(function () {
    console.log(this.innerHTML)
  })
  //需求4. 输出'测试三'按钮是所有按钮中的第几个
  /*index(): 得到在所在兄弟元素中的下标*/
 
console.log($('#btn3').index())  //2   /*
  1.
伪数组
    * 伪数组的类型: Object对象
    * 两个特别的属性:length属性
                     数值下标属性
    * 没有数组特别的方法: forEach(), push(), pop(), splice()
   */
 
console.log($buttons instanceof Array) // false
  //
自定义一个伪数组
 
var weiArr = {}
  weiArr.length = 0
  weiArr[0] = 'atguigu'
 
weiArr.length = 1
  weiArr[1] = 123
  weiArr.length = 2
  for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i]
    console.log(i, obj)
  }
  console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined
</script>

jQuery的两把利器的更多相关文章

  1. jQuery_jQuery的两把利器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JQuery 实现两列等高并自适应高度

    想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...

  3. 264分析两大利器:264VISA和Elecard StreamEye Tools

    学了264有将近3个月有余,好多时候都在学习老毕的书和反复看JM86的代码,最近才找到264分析两大利器:264VISA和Elecard StreamEye Tools.不由得感叹,恨不逢同时. 简单 ...

  4. JQuery中两个ul标签的li互相移动实现方法

    这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...

  5. 用js写出光棒效应的两种方法与jquery的两中方法

    <script src="js/jQuery1.11.1.js" type="text/javascript"></script> &l ...

  6. Spring Security和 JWT两大利器来打造一个简易的权限系统。

    写在前面 关于 Spring Security Web系统的认证和权限模块也算是一个系统的基础设施了,几乎任何的互联网服务都会涉及到这方面的要求.在Java EE领域,成熟的安全框架解决方案一般有 A ...

  7. jQuery实现两个DropDownList联动(MVC)

    近段时间原本是学习MVC的,谁知道把jQuery也学上了.而且觉得对jQuery更感兴趣,比如今早上有写了一个练习<jQuery实现DropDownList(MVC)>http://www ...

  8. Java上的jQuery?解析HTML利器—Jsoup

    也许大家有过在java运行平台上解析html的经历,通常的方式是将HTML以XML的形式进行结点解析,调用java本身的xml解析类库.这样的方式很容易理解并且很方便,但习惯用jQuery的各位是否在 ...

  9. jQuery实现两个按钮的位置互换

    页面上有2个按钮A和B.点击按钮A和按钮B互换位置 ,点击按钮B和按钮A互换位置.应该如何实现? html代码如下: <body> <!--页面上有2个按钮A和B. 点击按钮A和按钮 ...

随机推荐

  1. MHA-Atlas-MySQL高可用(上)

    MHA-Atlas-MySQL高可用(上) 链接:https://pan.baidu.com/s/17Av92KQnJ81Gc0EmxSO7gA 提取码:a8mq 复制这段内容后打开百度网盘手机App ...

  2. logging自定义模板

    import logging logger=logging.getLogger('这是一个日志')#先生成一个日志 formatter=logging.Formatter('%(asctime)s % ...

  3. 单实例安装elastic和启动报错解决

    下载 先到官网https://www.elastic.co/cn/downloads/past-releases/elasticsearch-5-5-2下载,我安装的是5.5.2的版本,其他版本直接访 ...

  4. 几种任务调度的 Java 实现方法与比较(定时任务)(转)

    转自:http://blog.csdn.net/javafay/article/details/8031269 综观目前的 Web 应用,多数应用都具备任务调度的功能.本文由浅入深介绍了几种任务调度的 ...

  5. 【leetcode】538. Convert BST to Greater Tree

    题目如下: Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the orig ...

  6. springCloud数据

    DROP DATABASE IF EXISTS springcloud_db01;CREATE DATABASE springcloud_db01 CHARACTER SET utf8;USE spr ...

  7. springMVC配置文件 的约束

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  8. MySql查询结果按照指定顺序排序

    Mysql这功能做的很好用啊!! 让查询结果按照指定顺序排序 --------------------------------------------------------------------- ...

  9. 管理员技术(三): 配置静态网络地址、 使用yum软件源 、 升级Linux内核、查找并处理文件、查找并提取文件内容

    一. 配置静态网络地址 目标: 本例要求为虚拟机 server 配置以下静态地址参数: 1> 主机名:server0.example.com    2> IP地址:172.25.0.11  ...

  10. 为delphi程序添加脚本功能,用脚本控制delphi程序

    使用微软的ActiveX Scripting技术,可以在应用程序中集成使用vbscript或这javascript脚本语言.在delphi中点击Component菜单的Import Activex C ...