$符号的实质

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

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

  //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. BZOJ2282 SDOI2011消防/NOIP2007树网的核（二分答案+树形dp）

    要求最大值最小容易想到二分答案.首先对每个点求出子树中与其最远的距离是多少,二分答案后就可以标记上一些必须在所选择路径中的点,并且这些点是不应存在祖先关系的.那么如果剩下的点数量>=3,显然该答 ...

  2. 自学Linux Shell3.2-切换目录命令cd

    点击返回 自学Linux命令行与Shell脚本之路 3.2-切换目录命令cd 当登录系统并获得shell命令提示符后,你通常位于自己的主目录中. 使用pwd命令验证: pwd命令以绝对路径的方式显示用 ...

  3. Shell基础知识（二）

    对于一个shell脚本来说,第一行是 "#!/bin/bash",这条命令中的 "#!" 告诉系统该用哪一款解释器来对该脚本进行解释,后面的"/bin ...

  4. centos6.5下修改文件夹权限和用户名用户组

    0.说明 Linux系统下经常遇到文件或者文件夹的权限问题,或者是因为文件夹所属的用户问题而没有访问的权限.根据我自己遇到的情况,对这类问题做一个小结. 在命令行使用命令"ll"或 ...

  5. Luogu 1081 【NOIP2012】开车旅行 （链表，倍增）

    Luogu 1081 [NOIP2012]开车旅行 (链表,倍增) Description 小A 和小B决定利用假期外出旅行,他们将想去的城市从1到N 编号,且编号较小的城市在编号较大的城市的西边,已 ...

  6. java 线程栈 & java.lang.StackOverflowError

    网上搜索了一下,关于java的线程栈: JDK5.0以后每个线程堆栈大小为1M,以前每个线程堆栈大小为256K. JVM的内存,被划分了很多的区域: (来源:http://www.iteye.com/ ...

  7. echarts2 饼图处理标签文字过长使之达到指定字数换行的目的

    在使用echarts2的过程中,有时会遇到标签文字过长导致显示不完整的问题.例如: 这时候就需要用到 标签里的formatter 回调函数来处理这种情况了. 方式一:  formatter : ' { ...

  8. ubuntu14.04上java jdk & mvn安装

    这些常用工具的安装步骤还是自己记录下,以后再次用到时就会方便许多. 系统:ubuntu14.04 jdk安装. 1.从官网下载好jdk安装包 jdk-8u111-linux-x64.tar.gz 2. ...

  9. pyautogui_pdf批量转换为TXT

    pyautogui_pdf批量转换为TXT, 用pdf自带无损转换 # -*- coding: utf-8 -*- """ Created on Thu May 5 15 ...

  10. db nosql redis / Redis Sentinel

    s Redis基础原理和日常操作方法 http://itsm.cns*****.com/kindeditor/img/20170527/759128afca564051b491e6a51a5bad40 ...