$符号的实质

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

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

  //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. java中线程安全和非线程安全的集合

    线程安全 非线程安全 Collection Vector ArrayList.LinkedList HashSet.TreeSet Map HashTable HashMap.TreeMap 字符串 ...

  2. python中字典和json的区别

    python中,json和dict非常类似,都是key-value的形式,而且json.dict也可以非常方便的通过dumps.loads互转 定义 python中,json和dict非常类似,都是k ...

  3. BZOJ1127 POI2008KUP（悬线法）

    首先显然地,如果某个格子的权值超过2k,其一定不在答案之中:如果在[k,2k]中,其自身就可以作为答案.那么现在我们只需要考虑所选权值都小于k的情况. 可以发现一个结论:若存在一个权值都小于k的矩阵其 ...

  4. day11 作用域

    返回值可以任何类型,返回可以是函数,返回函数还可以再被调用仅仅返回函数是无法运行的.要运行需要加上()没有返回值的时候,默认返回值为空,None def test1(): print("in ...

  5. MT【46】不动点，稳定点几何直观

    评:不动点概念在数列的一类题中也是非常有用的.

  6. Hdoj 基本输入输出8道(1089-1096)

    Hdoj 1089 #include<bits/stdc++.h> using namespace std; int main() { int a,b; while(cin>> ...

  7. c语言可变参

    一.什么是可变参数 在C语言编程中有时会遇到一些参数个数可变的函数,例如printf(),scanf()函数,其函数原型为: int printf(const char* format,…),int ...

  8. WorkFlow基础实战

    WorkFlow使用笔记---- 状态机工作流的使用: 1.首先,项目的目标框架要选择.Net4.5版本,才有状态机工作流. 2.新建“活动”项,先从工具栏拖出一个StateMachine,然后添加其 ...

  9. win7(旗舰版)下，OleLoadPicture 加载内存中的图片(MagickGetImageBlob),返回值 < 0

    昨天去三哥家,想把拍好的照片缩小一下,我用很久前写的一个软件进行缩小,然后进行一次效果预览,这个时候弹出: Call OleLoadPicture Fail - loadPictureFromMW 奇 ...

  10. #ifndef HeaderName_h #define HeaderName_h #endif 使用详解

    想必很多人都看到过头文件中写有:#ifndef HeaderName_h                                                #define HeaderNa ...