jq学习笔记

我在百度上看过js和jq的区别是这样说的：

1. 基本区别

• Js是网页的脚本语言，js是语言！
• Jq是用js语言写出来的一个框架！

 

      2. 详细区别

• Js和jq的最大区别是加载DOM文档的方式不同。
• 获取交互标签方式不同，以及交互标签调用函数方式不同，js通过document.getElementById(“btn”);document.getElementByTagName(“p”)等方法获取交互标签，而jq使用选择器交互标签直接进行交互活动。
• 其他不同点在于jq提供表单对象属性和css修改方式不同。

//jq方式实现表格的隔行换色

<script>

$(function(){

  $("tr:even:gt(0)").css("background-color","#666666");

    $("tr:odd").css("background-color","yellow");

});

</script>

//js方式实现表格的隔行换色

<script>

           function init(){

              var tab = document.getElementById("tab");

              for (var i=1;i<tab.rows.length;i++){

                  if(i%2 == 0){

                     tab.rows[i].bgColor = "yellow";

                  }else{

                     tab.rows[i].bgColor = "red"

                  }

              }

           }

</script>

//jq方式实现全选和全不选

<script>

           //文档加载函数

           $(function(){

              //绑定点击事件

              //this代表的是当前函数的所有者

               $("#checkAll").click(function(){

//使用属性选择$("input[type='checkbox']:gt(0)").prop("checked",this.checked);

               //使用层级选择器

                $("tbody>tr>td>input").prop("checked",this.checked);

              });

           });

</script>

//js方式实现全选和全不选

<script>

           function checkAll(){

              var check1 = document.getElementById("check1");

              //var checks = document.getElementsByTagName("input");

              var checks = document.getElementsByName("checkone")

              for(var i=1;i<checks.length;i++){

                  checks[i].checked = check1.checked;

              }

           }

</script>

    3. 个人理解

首先，我个人认为jquery和js是实现同种交互功能的两种不同开发方式，使用jq开发方式提高开发效率且实现的功能更加丰富。两种开发方式的不同之处在于js类似于我们学的c语言大多底层逻辑实现代码都要自己编写，而jq和Java的jdk一样已经编写好大多底层的实现方法，因此它可直接通过选择器选中交互标签操作方法。

Js的事件触发函数实在body的交互标签中去声明函数，head中定义函数。但是jq事件触发函数提到交互标签之外直接使用选择器定义触发函数。使得交互开发和css美化开发一样可以单独提出开发后再引入。

     4. Jq特性

1. 动画效果：show,hide,slidedoen,slideup,fadein,fadeup
2. 选择器：基本选择器和层级选择器+（可搭配）过滤方式；使用过滤器是十分高效率的一种开发方式，可代替js的for遍历和if条件去选择需要特殊处理的交互标签。属性选择器和表单对象选择器也是经常使用的开发方式，具体选择视情况而定。
3. 基本选择器

ID选择器：#xx；

类选择器：.类名；

元素选择器：标签名；

通配符选择器：*；

选择器分组：选择器1，选择器2；

• 层级选择器

后代选择器：选择器1 儿子

子元素选择器：选择器1>儿子

相邻兄弟选择器：选择器1+选择器2

所有弟弟选择器：选择器1~选择器2

• 基本过滤器

选择器：first   找出第一个

：even   索引为偶数

：odd    索引为奇数

：gt(index)    索引>index的

：it(index)     >index

：eq(index)    =index

• 属性选择器

选择器[href]   单个属性

选择器[href][type]  多个属性

选择器[href][type=’xx’]   多个属性包含特殊值

• 表单过滤器

：input    找出所有输入项：input textarea select

：text

：passwod

• 表单对象属性

找出select中被选中的哪一项

option：selected

• Jq开发步骤

1. 导入jq相关的包
2. 文档加载事件
3. 确定事件，确定交互标签
4. 实现事件，定义函数
5. 函数里面操作交互标签元素