Jquery重修基础学习

学习整理自菜鸟教程

使用说明炕翠+F

---

汽车遥控器常用频段 443,315

---

1. 使用基础
   引入Jquery的js文件（js文件夹下）

   <script src="js/jquery_3.1.js"></script>

   通过$(元素)来返回一个可执行对象引用
   该对象引用具有动作方法

2. 事件方法：
   常见方法名如下：

   方法名	对应效果
   click	点击
   keypress	按键按住
   submit	提交
   load	载入
   dblclick	点击两次
   keydown	按键按下
   change	当value改变
   mouseenter	鼠标经过
   keyup	按键弹起
   focus	聚焦
   scroll	滚动
   mouseleave	鼠标离开
   blur	失焦

   使用方法：

   $(document).ready(function(){
     $("p").click(function(){
       $(this).hide();
     });
   });

   (ready方法为加载完成后执行)
   可见事件方法参数常为函数对象，而该函数对象常指定
   何时何地(类似p.click即点击(何时)p(何地))发生何方法。

   重点：

   load(url,data,function(response,status,xhr))
   url ...
   data 是键值对
   举例如：
   $("#myID").load("test.php",{"name" : "Adam"});
   相当于test.php?name=Adam
   
   response - 包含来自请求的结果数据
   status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
   xhr - 包含 XMLHttpRequest 对象

3. 视觉效果方法

   隐藏 $(selector).hide(speed,callback);
   闪现 $(selector).show(speed,callback);
   切换隐藏闪现 $(selector).toggle(speed,callback);
   speed为速度，参数可选为slow，fast，毫秒数
   speed不填的话会当不变处理，而不是立即执行

   $(selector).fadeTo(speed,opacity,callback)

   adeTo() 方法中必需的 opacity 参数
   将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

   切换淡入淡出$(selector).fadeToggle(speed,callback);
   淡出已显示元素$(selector).fadeOut(speed,callback);
   淡入已隐藏元素$(selector).fadeIn(speed,callback);

   上滑收起$(selector).slideUp(speed,callback);
   下滑展开$(selector).slideDown(speed,callback);
   上下滑切换$(selector).slideToggle(speed,callback);

4. 进阶 动画

   tips：
   默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
   如需对位置进行操作，要记得首先把元素的 CSS position 属性
   设置为 relative、fixed 或 absolute！

   $(selector).animate({params},speed,callback);
   当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，
   比如，必须使用 paddingLeft 而不是 padding-left，
   使用 marginRight 而不是 margin-right，等等。
   同时，色彩动画并不包含在核心 jQuery 库中。
   如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

   {params}:
   利用+=可以实现移动等：

   $(“div”).animate({
   left:’250px’,
   height:’+=150px’,
   width:’+=150px’ });

   创意例子:

   $("button").click(function(){
     var div=$("div");
     div.animate({left:'100px'},"slow");
     div.animate({fontSize:'3em'},"slow");
   });

   其中的callback函数善加利用，在一个动画结束
   后进行一定的操作，能有许多有意思的点子

   $(selector).stop(stopAll,goToEnd);
   可选的 stopAll 参数规定是否应该清除动画队列。默认是 false.
   即仅停止活动的动画，允许任何排入队列的动画向后执行。
   可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false.
   因此，默认地，stop() 会清除在被选元素上指定的当前动画。

   一种名为链接（chaining）的技术，
   允许我们在相同的元素上运行多条 jQuery 命令，
   类似于动作元素种类中的sequence。
   (提高易读性)

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

5. 属性的方法

   • get & set：

   text() - 设置或返回所选元素的文本内容
   html() - 设置或返回所选元素的内容（包括 HTML 标记）
   val() - 设置或返回表单字段的值

   例如：

   $("button").click(funtion(){
       alert("Val" + $("#test").val());
   });

   attr 方法获取属性例如(href, id..)
   以上方法无参时返回原值(get)
   有参时将内容设置为参数(set)

   • 元素的添加：

   append在结尾添加
   prepend在开头添加
   对比一下：

   onclick = function(){
       // 使用 HTML 标签创建文本
       var txt1="<p>文本。</p>";  
       // 使用 jQuery 创建文本   
       var txt2=$("<p></p>").text("文本。");  
   
       // 使用 DOM 创建文本 text with DOM
       var txt3=document.createElement("p");
       txt3.innerHTML="文本。";   
       $("body").append(txt1,txt2,txt3);        // 追加新元素
   }

   after() 方法在被选元素之后插入内容。
   before() 方法在被选元素之前插入内容。

   以上方法是有区别的：
   after, before是在选中元素的外部添加
   而append, prepend是在元素内部添加
   比如：

   $("ol").after(<li>显示点比ol高阶<li>);
   $("ol").append(<li>显示数字比ol低阶<li>);

   ---

   • 元素的移除
     empty 删除selector的子元素
     remove 删除selector的子元素及本身

   而remove支持过滤系统
   删除class=”italic”的所有

   元素
   $(“p”).remove(“.it”);

   ---

   • 获取并设置 CSS 类
     addClass(“classNameWithNoPrepoint”)
     如果添加多个class中间用空格隔开
     如果添加到多个标签上则标签用，隔开
     $(“h1, h2”).addClass(“blue strong”);
     删除 removeClass
     切换添加删除 toggleClass

   css css({"propertyname":"value","propertyname":"value",...});
   $(“p”).css({“background-color”:”yellow”,”font-size”:”200%”})；
   尺寸的研究：
   width，height返回元素不包括外部的宽高
   innerWidth, innerHeight 返回包括内边距
   outerWidth, outerHeight 返回包括内边距和边框
   一图胜千言
   

6. Jquery 遍历

   parent 返回元素的直接父亲
   parents 上溯到祖宗
   返回son到ancestor之间的父元素
   son.parentsUntil(ancestor)

   children返回所有直接子元素
   过滤方法
   $(“div”).children(“p.className”);

   find() 方法返回被选元素的后代元素，
   一路向下直到最后一个后代，
   若子代有兄弟关系，也返回
   支持*匹配所有子代

   siblings() 返回兄弟元素
   内加参数则只返回该类元素
   $(“h2”).siblings(“p”);
   (p可换成.类名或#id名)

   next返回下一个同胞元素
   nextAll返回所有跟随的同胞元素
   nextUntil 嘿嘿你懂的

   同样的prev， prevAll， prevUntil
   方向相反，意思相同

   first() 方法返回被选元素的首个元素。

   过滤：
   $(“div p”).first() 或last();
   首个

   元素内部的第一个

   元素
   eq(number)方法可以指定索引
   下标从0开始

   filter 返回带某特性的所有元素
   $(“p”).filter(“.url”);
   返回类名为url的p元素
   对应相反的是not返回不带该特性的所有元素

7. 开始进阶
   $.get(URL,callback);
   第一个参数是我们希望请求的 URL（”demo_test.php”）。
   第二个参数是回调函数。
   其中第一个回调参数存有被请求页面的内容，
   第二个回调参数存有请求的状态。
   例如：

   $.get("demo_test.php",function(data,status){
       alert("数据: " + data + "\n状态: " + status);
     });

   有get必然有post：

   $("button").click(function(){
       $.post("post.php",
       {
           name:"菜鸟教程",
           url:"http://www.runoob.com"
       },
           function(data,status){
           alert("数据: \n" + data + "\n状态: " + status);
       });
   });

   post.php:

   <?php
   $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
   $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
   echo '网站名: ' . $name;
   echo "\n";
   echo 'URL 地址: ' .$url;
   ?>

   tips：
   关于noConflict，直接上代码
   说白了就是字面意思，避免同一页面
   多个框架使用$引起冲突

   <script>
   var jq=$.noConflict();
   jq(document).ready(function(){
     jq("button").click(function(){
       jq("p").text("jQuery 仍然在工作!");
     });
   });
   </script>

   或者这样使用

   <script>
   $.noConflict();
   jQuery(document).ready(function($){
     $("button").click(function(){
       $("p").text("jQuery 仍然在工作!");
     });
   });
   </script>

---

最后关于json文件的解析：
http://www.runoob.com/json/json-jsonp.html