$符号的实质

  //$其实就是一个函数，以后用$的时候，记得跟小括号 $();

  //参数不同，功能就不同

  //3种用法

  //1. 参数是一个function, 入口函数

  $(function () {

  });

  console.log(typeof $);

  //2. $(domobj)  把dom对象转换成jquery对象

//  $(document).ready(function () {

//

//  });

  //3. 参数是一个字符串,用来找对象

  //$("div") $("div ul")   $(".current")
//jquery:简单、粗暴

  //jq和js的关系

  //js是什么？ js是一门编程语言

  //jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。

  //概念

  //1. 为什么要学jquery ？ 简单，粗暴 没有兼容性问题

  //2. 什么是jquery？js库，说白了就是js文件，里面有一大堆的方法

  //3. 使用jquery的步骤：  1. 引入jquery文件 2. 入口函数 功能实现

  //4. 版本：1.x 2.x 3.x   1.x   压缩版和未压缩版

  //5. 入口函数：  $(document).ready(function)  $(function(){})

  //6. jQuery对象与DOM对象

    //区别：方法不能混用

    //联系： DOM-->jq   花钱  jq-->dom  [0]  get(0)

  //$的实质：function

//  console.log($ === jQuery);

//  $(function () {

//

//  });

  //选择器

  //基本选择器  标签 类  id选择器  交集  并集

  //层级选择器： 子代 后代

  //过滤选择器：

  //:odd:奇数  even:偶数  :eq：指定下标

  //:first  :last  :gt  :lt

  //筛选选择器

  //children():找儿子

  //find():找后代

  //parent():找爹

  //siblings():找兄弟，不包括自己

  //next:下一个兄弟

  //prev:上一次兄弟

  //eq:指定下标

  //index()：返回的当前元素在所有兄弟里面的索引。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：实例 $("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value"); 例子 $("p").css("background-color","yellow");
设置多个 CSS 属性，请使用如下语法： css({"propertyname":"value","propertyname":"value",...});

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight() 
    <script>
    
$(document).ready(function(){
    
  $("button").click(function(){
    
    var txt="";
    
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    
    txt+="div 高度: " + $("#div1").height() + "</br>";
    
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    
    txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    
    $("#div1").html(txt);
    
  });
    
});
    
</script>

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

  • parent() 获得上一层
  • parents() //获取父的所有

parentsUntil() //获取某个范围

<script>

$(document).ready(function(){

  $("span").parent().css({"color":"red","border":"2px solid red"});

//获得父dom 同时设定 他们的样式

});

</script>

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

实例$(document).ready(function(){ $("span").parentsUntil("div"); });

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

  • children() 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
  • find() 返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

实例  $(document).ready(function(){ $("div").children("p.1"); });

下面的例子返回属于 <div> 后代的所有 <span> 元素：

实例  $(document).ready(function(){ $("div").find("span"); });

jQuery - 链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function()

  {

  $("button").click(function(){

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

  });

});

</script>

</head>

<body>

<p id="p1">菜鸟教程!!</p>

<button>点我</button>

</body>

</html>

JQuery基础概念--$符号的实质的更多相关文章

  1. jQuery基础--基本概念

    为什么要学习jQuery? [01-让div显示与设置内容.html] 使用javascript开发过程中,有许多的缺点: 1. 查找元素的方法太少,麻烦. 2. 遍历伪数组很麻烦,通常要嵌套一大堆的 ...

  2. 《jQuery基础教程(第四版)》学习笔记

    本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...

  3. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  4. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  5. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  6. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  7. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  8. jQuery基础教程

    1.使用$()函数 $()函数其实是创建了一个jQuery对象. 这个函数接受CSS选择符作为参数,充当一个工厂, 返回包含页面中对应元素的jQuery对象. 所有能在样式表中使用的选择符都可以传给这 ...

  9. 《jQuery基础教程》读书笔记

    最近在看<jQuery基础教程>这本书,做了点读书笔记以备回顾,不定期更新. 第一章第二章比较基础,就此略过了... 第三章 事件 jQuery中$(document).ready()与j ...

随机推荐

  1. c# 对象存cookie

    下载并引用Newtonsoft.Json.dll 对象转json,然后存cookies string xxx= Newtonsoft.Json.JsonConvert.SerializeObject( ...

  2. MT【19】舒尔不等式设计理念及证明

    评:舒尔的想法是美妙的,当然他本身也有很多意义,在机械化证明的理念里,它也占据了一方田地.

  3. 19 Zabbix web监控实例

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 9 Zabbix web监控实例 通过前面的介绍你已经了解Web scenario的配置,下面我们 ...

  4. 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS

    返回 自学工业控制网络之路 自学工业控制网络之路1.1-工业控制系统发展历程CCS DCS FCS 工业控制系统是对诸如图像.语音信号等大数据量.高速率传输的要求,又催生了当前在商业领域风靡的以太网与 ...

  5. 【BZOJ1925】[SDOI2010]地精部落（动态规划）

    [BZOJ1925][SDOI2010]地精部落(动态规划) 题面 BZOJ 洛谷 题解 一道性质\(dp\)题.(所以当然是照搬学长PPT了啊 先来罗列性质,我们称题目所求的序列为抖动序列: 一个抖 ...

  6. BZOJ 5308 [ZJOI2018] Day2T2 胖 | 二分 ST表

    题目链接 LOJ 2529 BZOJ 5308 题解 这么简单的题 为什么考场上我完全想不清楚 = = 对于k个关键点中的每一个关键点\(a\),二分它能一度成为哪些点的最短路起点(显然这些点在一段包 ...

  7. 【转】IAR IDE for MSP430、8051、ARM等平台的结合使用

    IAR IDE for MSP430.8051.ARM等平台的结合使用 以前很长一段时间使用IAR作为MSP430的开发平台,前几天一个无线监控的项目用到了Zigbee(CC2530),于是开始使用I ...

  8. 教你如何开启/关闭ubuntu防火墙

    目录  [隐藏]  1 安装方法 2 使用方法 3 推荐设置 4 详细使用说明 安装方法 sudo apt-get install ufw 当然,这是有图形界面的(比较简陋),在新立得里搜索gufw试 ...

  9. luogu1600 [NOIp2016]天天爱跑步 (tarjanLca+dfs)

    经过部分分的提示,我们可以把一条路径切成s到lca 和lca到t的链 这样就分为向上的链和向下的链,我们分开考虑: 向上:如果某一个链i可以对点x产生贡献,那么有deep[x]+w[x]=deep[S ...

  10. 牛客练习赛40 C 小A与欧拉路（树的直径）

    链接:https://ac.nowcoder.com/acm/contest/369/C 题目描述 小A给你了一棵树,对于这棵树上的每一条边,你都可以将它复制任意(可以为0)次(即在这条边连接的两个点 ...