$符号的实质

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

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

  //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. python 模块之-configparser

    python 模块configparser   配置文件模块 import configparser    config = configparser.ConfigParser() config[&q ...

  2. PHP生成二维码并上传到七牛云

    参考资料 qr-code生成二维码    七牛云上传图片 实现步骤 //拿到插入后的id $res = DB::table('book_book')->insertGetId($data); i ...

  3. MT【54】一道二次函数问题的几何意义

    [Rather less, but better.]----卡尔·弗里德里希·高斯(1777-1855) (2016诸暨质检18)已知$f(x)=x^2-a|x-1|+b(a>0,b>-1 ...

  4. CF1131D Gourmet choice（并查集，拓扑排序）

    这题CF给的难度是2000,但我感觉没这么高啊…… 题目链接:CF原网 题目大意:有两个正整数序列 $a,b$,长度分别为 $n,m$.给出所有 $a_i$ 和 $b_j(1\le i\le n,1\ ...

  5. /dev/null 2>&1 什么意思

    在Unix中,标准输入设备 stdin是0, stdout 是1, stderr是 2.    /dev/null 2>&1这样的写法意思是将标准输出和错误输出全部重定向到/dev/nu ...

  6. （转）使用 Spring缓存抽象 支持 EhCache 和 Redis 混合部署

    背景:最近项目组在开发本地缓存,其中用到了redis和ehcache,但是在使用注解过程中发现两者会出现冲突,这里给出解决两者冲突的具体方案. spring-ehcache.xml配置: <?x ...

  7. 淘宝助理导出的csv文件使用的是什么编码，您猜？

    今天下午用Java读取从淘宝助理 V4.3 Beta1导出的csv文件,出现中文乱码情况. 一看就是文件编码引起的,不清楚淘宝助理导出的csv文件使用了什么编码,到百度搜索了一下,看到一些相关文章,但 ...

  8. 弹窗中修改select默认值遇到的问题

    弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...

  9. HTML中使用<input>添加的按钮打开一个链接

    在HTML中,<form>表单的<input type="button">可以添加一个按钮.如果想让该按钮实现<a> 的超链接功能,需要如下实现 ...

  10. springboot静态资源处理

    转:https://blog.csdn.net/catoop/article/details/50501706 Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConf ...