同学们，以下是今日任务，以案例为主。今日重点是掌握JQuery基本选择器（其他选择器不需要背诵记忆，对照会使用即可）和DOM操作，要求每位同学可以完成以下案例，然后以口语化的方式在评论区提交你的每日总结，谈谈你对今日重点知识的理解!

• 使用JQuery完成页面定时弹出广告
• 使用JQuery完成表格的隔行换色
• 使用JQuery完成复选框的全选效果
• 使用JQuery完成省市联动的效果
  

林文辉

1.JS对象和JQ对象的相互转换.



2.JS页面加载只能执行一次,而JQ则可以执行多次,并且效率比JS高太多了

3.定时弹出广告:用js实现的比较生硬,jQuery的show(),滑动及淡入淡出则让
显示效果更加的人性化和饱满.

4.表格隔行换色:通过基本过滤器的odd(奇数行),even(偶数行)及内容选择器
实现了隔行换色,并且可以通过.css()或者.addClass();来给表格进行添加样式,
简简单单的4 5行代码就搞定了,不需要像js那样还要进行循环判断.

5.复选框的全选和全不选:通过id选择器获取元素,再通过内容选择器及
Prop属性来完成,相对于之前用Js写法,省略了至少10多行代码.真的做到了
Write less, do more.

6.省市联动:通过jQuery的循环 each方法进行遍历,append属性进行追加,同对比
js,同样是省略了很多的代码

7.选择器很重要,很多的地方都需要用到选择器,灵巧的运用可以减少代码量,
提高效率

8.attr()和prop()的区别:
8.1prop( )是针对Dom元素属性，attr( )针对HTML元素属性
8.2prop()如果有相应的属性,则返回指定的属性值;如果没有则返回空字符串
     attr()如果有相应属性返回其指定的属性值,如果没有则返回underfined
8.3 新版本更新了attr,具体哪个版本就不清楚了,比如复选框,attr全选只能执行一次
     而prop则可以多次.有点坑.所以要使用attr最好使用早点的版本

9.通过案例对比可以发现,jQuery真的非常的强大,只需短短几行代码,就能实现
所需的功能,如果能熟练的掌握JQuery,那么前端至少已经没什么太大问题了.
并且JQuery也是前端主流的开发框架,应多加练习和运用.

杜石苇
HTMLday5 JQuery学习总结
今日学习了JQ的使用.
jquery的常用语法$("css标签").事件/方法（funciton(){...方法内容}）
，页面加载完成的触发方法是$(document).ready(funciton(){...方法内容})或者写成：$(function(){...方法内容})。

        jquery提供了方便的标签选择方法，与css类似，只需要在$(" ")中添加上所需要的标签即可，
                同样它还具备智能筛选机制，例如：table tr是获取table中每一行，table tr:even是获取偶数行；
                .main a是获取class为main下的所有a标签，.main >a则是获得class为main下的子a标签。
       jquery方法和事件种类繁多，要采用合适的分类方法，就不会很复杂。jquery操作是基于html元素进行的，
           首先有获取元素节点的方法；对html页的样式进行编辑，就要有灵活的控制css及页面元素的添加和移除方法；
           让页面动画显示，来形成美观效果，则采用控制显示效果的方法；判断对象是否正确则使用验证方法，最后与后台数据进行交互;


使用JQuery完成页面定时弹出广告
思路是设置 首先设置adDiv  首先把广告模块display设置成none;
然后 设置JQ页面加载时就加载 $(function(){  显示隐藏方法});
利用JQ中效果中的几个方法进行弹出广告  比如show() hide()  还能设置淡入fadeIn();  淡出 fadeOut(); 向下滑入slideDown(); slideUp();        -向上滑出

使用JQuery完成表格的隔行换色
JQ完成表格换色思路是 JQ中有个:odd  奇数 :even 偶数选择器 利用奇数偶数行数进行换色(这个奇数偶数是基础选择器)
引入css样色后换色的更方便
        $("tbody tr:odd").addClass("odd");
                                $("tbody tr:even").addClass("even");
对比之前的自己写的JS真的是方便多了   轻量好用


使用JQuery完成复选框的全选效果
思路是利用JQ中的:表单选择器和prop设置属性
$(":checkbox[name='ids']").prop("checked",this.checked)   
name为ids的所有复选框 勾选状态都等同于这个按钮复选框的状态  
之前的JS还要设置if true或者 else false  还是JQ方便

使用JQuery完成省市联动的效果
思路是利用JQ中的append 添加 和 $(数组).each(function(i,n){});  数组的遍历添加城市信息 设置
首先设置城市二维集合  citys 还有对应省份的value值 跟JS差不多
设置每次选择省份后城市city里面的选项都初始化为长度1  这个用到JS转JQ  get(0)方法内容
设置选择省份后遍历citys集合  $(citys).each(function(i,n){
当遍历到i的值和选择的省份值相同后  继续遍历n里面的值然后添加进去city里面的选项option
$(n).each(function(j,m){
        $city.append("<option>"+m+"</option>");
});

【总结】
        jquery给我们提供了方便的代码库，让我们的前台样式编辑与事件方法紧密的联系在一起，
                灵活的掌握jquery获取元素，绑定事件的方法才是重中之重。

吴利君
今天学习了JQuery，总的来说，JQuery就是js的一种框架，它简化了js的代码，做到了写的越少，做得越多的目的。
首先，jQuery的基本语法相对于js它只需要$（选择元素）这样就可以对元素进行选择，然后进行操作。而且jQuery拥有强大的选择器，能够很快的对元素进行选择，简单快捷。其中，jquary的选择有很多种类，首先是基本选择器，主要为$()的格式，括号中间可以使用#id选择.class选择元素名选择，以及多个选择等等。然后是层级选择器，主要有a b后代选择 + 下一个同辈选择，>第一层元素选择，~ 后面所有同辈选择等，然后还有表单选择，例如：CheckBox【name = ‘“”】等，当然，还有过滤选择器，例如odd奇数，even偶数等，JQuery提供了大量方便的选择器，能够极大的简化了js代码的书写，提供效率。
而且jQuery能够联动css样式，使得修改书写网页更加便捷。
Jquary的强大不仅仅是选择器的强大，还有很多封装好的功能，我们通过今天的案例进行学习。首先是第一个广告的案例，这个案例我们通过学习，懂得了jquary的一些效果的使用，例如淡入淡出fafein()fadeout()，显示隐藏show（）hide()，上下滑slideDown()slideUp(),以及切换toggle。我们可以通过设置时间，达到慢慢滑出慢慢显示等等效果，而不用书写大量的js代码来实现。
然后是第二个案例，这个案例是表格的隔行换色，这个案例主要的知识点是过滤选择器，表单选择器以及属性的设置，我们可以通过表单选择器（：checkbox[name =’ids’]）快速的获取我们所需要设置的表格，然后使用过滤选择器进行奇偶行(tr:odd/even)的属性设置，这里有个小技巧，我们如果属性的name值是唯一的话，我们可以直接使用【name = “***”】这样来获取元素，但我们获取元素后，可以使用attr和prop来进行属性的设置，不过jquary1.11版本好像attr不能用，所有推荐使用prop，当然也可以使用css或者addclass来进行样式的设置。
第三个案例是全选和全不选，这个案例的知识点和案例二差不多，都是可以使用表格选择器进行快速选择，然后使用prop进行获取checked的值和赋值。
第四个案例是省级联动，这个案例主要的知识点是Jquary简化的数组的赋值，更加方便，然后是元素添加的方法append的使用以及遍历的使用。
这个案例首先是需要获取省的值，这个直接使用prop获取，然后我们设置点击事件，然后进行跟踪option的值，然后获取数组里面相应的值。其中，我们在获取城市之前需要进行清空，或者替换，可以使用empty()方法进行清空，也可以直接设置city里面的option的长度为1这样就可以初始化，然后我们使用遍历的方法进行遍历我们的数组，然后使用append方法进行元素的添加。这里注意的是遍历的方法有两种，首先是 $(数组).each(function(索引,值) 和 $.each((数组)，function(索引,值)，别弄错了，还有就是append是在当前元素内添加，而appendto是添加到另一个元素。
最后是第五个案例，这个案例主要考察的就是appendto这个方法，以及单次点击和双击事件，不是很难。主要注意的还是appendto的使用方法，它是添加元素到另一个元素内的，也就是移动。
最后，自从学了Jquary，JS就不想写了！

姓名:曾耀峰


    今天的JQuery不多操作是很难理解的。原本是冲着做狂帅酷炫叼炸天的JQ特效来的。结果飘逸的特效没有学到，反而撩到一个更难的JS升级版的代码。原来敲JS还是做得爽歪歪，代码是多了点，可是逻辑走得通。但是感觉JQuery一句代码走了好几步逻辑，总是不容易理解。
    不过永远只有难却好用的东西能够吸引程序员的注意。大概是“因为你不会我会”的感觉。

    提一个问题:是JQ还是JS？JQeuery是JS的一个封装库，相当于Spring是Java的其中一个框架。据我所知，目前JQ实际上是一个三四年前的技术，并不算新。现在国内流行的是Vue.js，是国内一个JS大佬开发，相当于支持国货吧。世界范围流行的是Node.js，适合用于做服务器端；另外还有一个来自FaceBook免费提供的开源JS项目React.js，这个js库受人追捧的原因是，脸书作为拥有世界上最多用户的社交平台，其宣称公司研发的产品所用的js库都是自家开发的这个React.js。试想，脸书作为拥有世界上最多用户的平台，它所承受的流量压力也是最大的。我们在开发一款软件的时候，总是担心所使用的开发工具(开发语言)性能不够好，承受不住任何异常情况。基于这样的想法，大家就觉得React.js是一个优秀的js库。最后还有一个Rngular.js。不了解，暂且mark一下。
   
   扯远了，想说JS不仅仅是一个前端语言，在服务端上也能发挥很好的作用。
  
   总结一下今天的知识:往后面的案例在理解上越来越难。先把以下几点基础知识掌握一下。
   
   一、选择器

   JQ的焦点还是放在选择器上面。其中要掌握或了解的是以下五大方面的选择器。
   
   1.九大基本选择器(掌握):id选择器("#id名")，类选择器(".类名")，元素(标签)选择器("标签名")，通配符选择器("*")，并列选择器("#div1,.div2,p");后代选择器(#div p),儿子们选择器(#div>p),大儿子选择器(#div~p) 大弟弟选择器(#div+p)等九大基本选择器;
   
   2.过滤元素选择器方面(有印象)，有奇数("#div p:odd") 偶数("div p:even")， 索引("div p:eq(2)")(得到第3个元素，是从0开始算的),首位("#div p:first"),末位("#div p:last"),包含($("p:contains(is)"))等选择器。这个做案例"表格间隔变色"用到啦
   
   3. 属性选择器两个(掌握):
     1).$("img[src]"):含有某个属性的选择器。
     2).$("img[src = 'img/a.jpg']"):含有某个属性值src = "img/a.jpg"的选择器
   
   4.表单选择器(格式记得):
     1).$(":checkbox") 所有的多选框
     2).$(":checkbox[name='selectBox']") name属性值为selectBox的多选框。
     其他的表单选择器都是按照这个格式

   二、理解什么是JQ对象:
     
      先了解一下$("")或者Jquery()这个JQ对象。
     
     1).$("")这个对象返回的值总是数组，不过你是用id选择器$("#div1")得到一个对象，或者类选择器$(".div1")得到了多个对象，$()它返回的都是一个对象数组。不是单个变量。
     因此，就有了JQ对象$("")转换成js对象的两种形式:
       [1].var div1 = $["#div1"][0];
       [2]. var div2 = $["#div2"].get(0);
     
     2) $(function{}):这个相当于js中的window.onload(function{});两者都是网页文档加载就能触发事件。但是js的onload只能声明一次，而JQ的$(function{})能用多次。
     
     3) JQ除了"学的少，用得多"的宗旨，还有一个比较重要的特点是能实现启动事件与Html代码分离。使用JS总要在HTML代码中添加启动事件onload = "JS函数名([参数可选带入])"。然鹅使用JQ:直接在加载文档事件中对可能启动事件的标签绑定事件即可:
     比如案例"省市联动的JQ版制作中":
$(function()
{
   $("#province").change(function(){});
});
这个就直接在文档加载后，对省份下拉框绑定了onChange事件。
   
   三、JQ对象的文档处理

     JQ对象的文档处理工作主要表现在两方面:
     一是对标签属性的增加，获取，删除，修改处理
     二是对标签的增加，获取，删除，修改处理
     
     1.对属性的处理:
     1).获取:$src = $("#img").attr("src");
     2).修改:$("#img").attr('src','../img/p2.jpg');
     3).增加:$("#btn").attr('disabled','disabled');       //增加多个属性:$("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial });
     4).删除:$("#text").removeAttr('style');

     2.对标签处理:
      
     1)获取:$("选择器类型")
     2)添加:append():$("a").append("<p>我是文字</p>");//在a标签里面插入p标签
            appendTo();将一个元素移到另外一个元素后面: $("<img src ='../img/p1.jpg'/>").appendTo("a");把img标签插入到a标签后面
     3)删除:$("#link").remove();//自杀删除。所选元素和子元素全没了

     另外记住下面三个函数
     text() - 设置或返回所选元素的文本内容
     html() - 设置或返回所选元素的内容（包括 HTML 标记）
     val() - 设置或返回表单字段的值 (表单专用)
  
     上面贴了一些自测的代码，有的方法明明知道，但是不会用。是因为缺少亲自测试。
   
   四、在JQ中的两种遍历:
   
     1.$.each(arrs,function(i,m));// 第一种:each()参数两个型:arrs表示一个数组，i是索引值，m是arrs[i]的值
     2.$(arrs).each(function(j,n));    // 第二种:each()参数一个型
     
     3.二维数组都可以当作一维数组来使用:
       $.each(cities, function(i, n)
       {
         {$(n).each(function(j, m) {$city.append("<option>" + m + "</option>");});
     
     4.遍历不止于数组，可以对一个列表遍历:
$("li").each(function(){
    alert($(this).text())
  });
});
  
  五、简单总结:
    回顾上面的知识后，对今天的五个案例做一下思路上面的整理:
    1.案例1:使用JQ完成页面定时弹出广告:
      1).利用setInterval和cleanInterval组合，配合一组动画效果(显示show(millTime),hide();淡入淡出fadeIn(),fadeOut;移上移下slideDown()sildeUp())即可完成
      2).使用setTimeOut()只执行一次更加简便
     
    2.案例2:表格隔行换色:
      获取表格的身体部分<tbody> 运用奇数偶数选择器$("tbody tr:odd").css("color":"颜色值");即可完成
      
    3.案例3:表格多选框的全选和全不选:
      1)对总控制多选框设置id="allSelect" 其他子多选框设置id = "select" JQ对象获取分别获取:$("#allSelect"),$("#select")
      2)给总控制多选框绑定点击事件 $("#allSelect").click ="function(){}".
      3)获取它的属性checked: $("#allSelect").attr("checked")判断:
      4）依照判断结果对子选择款设置checked属性:
      true: $("#select").attr('checked','checked');
      false:$("#select").attr('checked','')


   4.案例4:省级联动选择框:
      1.分别获取省级选择框$("#province"),$("city");
      2.对省级选择框绑定onChange事件:$("#province").onChange(function(){});当省级框的<option>发生改变时候，就可以调用这个事件，然后var val = this.value;获取当前option的value值
      3.根据val值遍历预先设置好的cities城市数组，显示的结果是cities[val]。
      4.city.append(cities[val]);
      5.做city清空前面已经存在的<option>项

许剑鸿 webDay05

学习了JQuery:JS的一个类库,对JS进行封装 优点:learn more , write less , do more;

使用Jquery首选要导入Jquery的js的文件 <script src="path"></script> 使用语法$("选择器")

JQ对象不能使用JS的方法和属性 JS对象也不能使用JQ的方法和属性 但二者可以互相转换
JQ-->JS:JQ对象[0]或JQ对象.get(0);  JS-->JQ:$(JS对象)

JQ与JS在事件的区别:将on去掉其它相同 例如:JS中onclick--->JQ中click
JS中页面加载事件(window.onload())只能有一个 JQ可以有多个 $(funtion(){})

                            JQ今日重点掌握各种选择器及DOM中增删及数组的遍历方式(其它的使用时查API):

基本选择器:id选择器$("#id")   类选择器$(".类名")  元素(标签)选择器$("元素名称")
通配符选择器$("*(页面中所有元素)") 并列选择器$("选择器,选择器....")

层级选择器  $("a b")a下所有b元素   $("a>b") a下所有同级b元素  $("a + b")a的下一个b元素 $("a ~ b") a之后所有同级b元素

属性选择器 [属性名] [属性名='属性值']

选择器可以配合使用比如:基本选择器+过滤器 或层级选择器+属性选择器 更方便查找元素

dom中增删方法:a.append(c) 将c插入a后面 c是html代码 a.appendTo(c)将c插入a内部之后(不是创建新元素)

JQ数组遍历方法:
1  $(arr).each(function(i,n){}) 相当于将arr数组转为JQ对象使用each  i代表数组索引 n代表数组中元素
2  $.each(arr,function(i,n){})

使用JQ使代码变的简洁且功能较之前更为丰富

张裕
Eclipse不在的第五天 想它  
WEB前段第五天 学了JQuery(JS的一个框架|类库) JQ对传统的JS进行了封装 在现在的企业开发中通常都是使用JS的框架进行开发
JQ的使用需引入JQ的js文件

JQ对象转JS对象
        1 $JQ对象[0]
        2 $JQ对象.get(0)

JS对象转JQ对象
           $(JS对象)

获取JQ对象可以做到元素的显示和隐藏(方法查API)
JQ的主要选择器
基本选择器
id        用法: $("#id")
类        $(".类名")
元素        $("元素名称")
通配        $("*")
并列        $("选择器,选择器...")

层级选择器
后代  空格(会找所有的后代元素)
子元素        >(只会找子元素)
下一个元素 +(找到指定元素同辈的下一个元素)
兄弟元素        ~(找到指定元素后面的所有同辈元素)

基本过滤选择器
odd 奇数
even 偶数
内容选择器
属性选择器
(查询api)

主要案例
JQ隔行换色与复选框!
odd 奇数
even 偶数
获取奇偶数行.css修改属性

复选框 获取顶部对象 添加点击事件触发函数!
获取子复选框对象 添加属性checked 值为顶部勾选状态

省市联动!
1 获取省份对象 设置事件 触发函数
2 获取value返回值
3 创建市对象
4 清空子元素 empty()
5 $.each遍历数组
6 判断省份
7 二次遍历
8 city.append添加字符串

今天学的JQuery框架 使之前的代码更佳简短化 使用更佳灵活 不用在通过臃肿的代码实现效果了 800个选择器和方法 记不住
只能后面查API了

叶身辉:
今天学习了JQ,也就是jQuery,它是一种对JS封装后的类库,可以更加方便的使用JS
要使用JQ就必须引入JQ的js文件才行
$(“选择器”),是JQ的主要语法,JQ和JS可以互相转换,JS->JQ只要在前面加上$(JS对象)即可,JQ->JS主要是JQ对象[0]或者JQ对象.get(0);
JQ的页面加载主要是$(function(){});
JQ的效果方法,show()显示,hide()隐藏,slideDown()滑入,slideUp()滑出,fadeIn()淡入,fadeOut()淡出,toggle()切换函数,两个两个一一对应,最后一个切换函数新的版本已经取消,使用方法都是JQ对象.show(毫秒值).
JQ的选择器主要有:$(“#ID”),$(“.类名”),$(“元素名称”),$(“*”),$(“选择器选择器选择器”)
                                $(“a b”),$(“a>b”),$(“a+b”)$(“a~b”),$(“[属性名=’值’]”),even偶数odd奇数
JQ对属性操作主要使用prop
JQ对DOM的操作:append在后面添加可以是函数
Empty删除所有子标签
$.empty遍历数组
JQ中的CSS:引入css文件  addClass添加样式,removeClass删除样式
主要的单词或者固定语句:
Show显示
Hide隐藏
Even偶数
Odd奇数
Prop支撑 , 对属性进行操作,增删
Empty清空
$.empty遍历数组专用固定语句
First第一
Last最后的
toggle开关

郭明杰:
JQ是为了让JS更简化,是一个JS的框架,对传统的JS进行了封装.
把JQuery对象转成JS对象有两种方法,一种在JQ对象后面加[0],一种在后面加get[0],把JS对象转成JQuery对象 :将JS对象用$() 括起来即可
*show() 显示 *hide() 隐藏,括号里面加毫秒值的话可以控制出入的时间

*基本选择器
       *id选择器                      $("#id");
       *类选择器                    $(".类名");               
       *元素选择器                 $("元素名称");        找到页面所有这个名称的元素
       *通配符选择器                 $("*");所有元素      直接找到页面所有元素
       *并列选择器                  $("选择器,选择器,选择器")   同时选择多个元素
*层级选择器
        *后代选择器                使用  "  " 空格     a  b 选择a下面所有b
        *子元素选择器              使用>        a>b 选择a下面所有第一层b
        *下一个选择器              :使用+                a+b 选择a的后一个所有叫b的大弟弟(选择下一个的同辈)
        *兄弟元素            :使用~        a~b 选择a之后的所有叫b的同级b(选择之后的所有同辈)
*基本过滤选择器
        *odd  奇数索引
        *even        偶数
        *gt    大于
        *lt        小于
        *eq        等于

a.append(c) 添加操作      // 将c添加到a的最后一个元素
a.appendTo (c)添加到--        //将a添加为里面最后一个元素
*prop()
一:$("").prop("src");
二:$("").prop("属性":属性值","属性":属性值");

[JQ的元素遍历]
        1:$(数组.each(function(i,n){});   //i代表索引,n代表值
        2:.each(数组,function(i,n){})                //同上

补充 :
**appdend里面可以添加JS的标签**

郭明杰:
JQ是为了让JS更简化,是一个JS的框架,对传统的JS进行了封装.
把JQuery对象转成JS对象有两种方法,一种在JQ对象后面加[0],一种在后面加get[0],把JS对象转成JQuery对象 :将JS对象用$() 括起来即可
*show() 显示 *hide() 隐藏,括号里面加毫秒值的话可以控制出入的时间

*基本选择器
       *id选择器                      $("#id");
       *类选择器                    $(".类名");               
       *元素选择器                 $("元素名称");        找到页面所有这个名称的元素
       *通配符选择器                 $("*");所有元素      直接找到页面所有元素
       *并列选择器                  $("选择器,选择器,选择器")   同时选择多个元素
*层级选择器
        *后代选择器                使用  "  " 空格     a  b 选择a下面所有b
        *子元素选择器              使用>        a>b 选择a下面所有第一层b
        *下一个选择器              :使用+                a+b 选择a的后一个所有叫b的大弟弟(选择下一个的同辈)
        *兄弟元素            :使用~        a~b 选择a之后的所有叫b的同级b(选择之后的所有同辈)
*基本过滤选择器
        *odd  奇数索引
        *even        偶数
        *gt    大于
        *lt        小于
        *eq        等于

a.append(c) 添加操作      // 将c添加到a的最后一个元素
a.appendTo (c)添加到--        //将a添加为里面最后一个元素
*prop()
一:$("").prop("src");
二:$("").prop("属性":属性值","属性":属性值");

[JQ的元素遍历]
        1:$(数组.each(function(i,n){});   //i代表索引,n代表值
        2:.each(数组,function(i,n){})                //同上

补充 :
**appdend里面可以添加JS的标签**

16weisong
今天学习JQ知识,只要能说出JQ和JS的不同之处即可掌握.如js对象和jq对象如何转换?二者的执行时机?jq的事件?jq的选择器?jq的操作元素css的方法,操作属性的方法?操作DOM的方法?以上均和js对应部分知识比较清楚差别即可掌握今天的知识.

陈叶隆
首先要导入.js文件,然后在<script>里面创建加载项$(function(){});然后要选好选择器,这个很关键,选择器选得好,往往可以事半功倍.获取操作对象的控制权后,对对象的属性进行增(append())删(remove())改(prop(“属性名”,”属性值”))查(prop(“属性名”))的操作.JQ里有两种遍历数组的方式:$(arr).each(function(i,n){})和$.each(arr,function(i,n){}).//i是索引值,n是子元素.

李志勇:
jQuery:
jq是对js进行封装/的内库,通过jQuery的学习能过更加灵活的操作;
jQuery的使用  
        首先是引入格式<script scr=".....js/jquery.js"></script>
        <script>
                $(function(){
                               

                })
        </script>
如果需要触发事件的情况下  格式:
        <script>
                $(function(){
                        $(对象).事件(function({
                       

                        }))       

                })
        </script>
js-jq的互相转换   使用js或jq获得的对象  不能使用对方的方法  需要转换后才能用
        js->jq  $(js对象)
        jq->js   jq对象.get(0)   jq对象[0]
jq的效果   
        show()  hide()的函数可以对广告的弹出和隐藏进行进一步的修改 效果更进一步
        slideDown()  slideUp()   fadeIn()  fandeOut()  可以对效果实现向下出现向下  淡出  淡入   参数 可以对出现  和消失所用时间进行更改;
jq的选择器          
        基础  层级  属性  基础过滤  内容过滤  表单过滤 等
通过学习  可以更加方便  更加精确的获得对象 和操作
jq的一些DOM操作
        append()  appendTo()  empty()  $(数组).each(function(i,n){});$.each(arrs,function(i,n){})  等一些常用的函数  功能

郑阳阳
今天学习了JQ,JQ是一个JS的一个框架,能够写更少的代码,做更多的事情.
JQ使用前需要导入JQ的JS文件,JQ语法是$("选择器")或者jQuery("选择器"),一般使用前者.
JS与JQ不能使用对方的方法和属性,但是JS和JQ对象可以互相转换.
JS转JQ:$(JS对象).JQ转JS:1.JQ对象[index] 2.JQ对象.get(index)
JQ的事件名不用加on.页面加载成功事件$(function(){ });
页面加载成功后才能使用JQ事件!

JQ的效果(广告案例)show()显示,hide()隐藏,slideDown()向下滑入,slideUp向上滑出
fadeIn淡入,fadeOut淡出.一般使用方法JQ对象.方法(毫秒值);

JQ选择器,重要的是基本选择器,层级选择器和属性选择器.
基本选择器包括id选择器$("#id"),类选择器$(".类名"),元素选择器$("元素名称")
通配符选择器$("*"),并列选择器$("选择器,选择器..")

选择器中的过滤,今天使用even偶数,odd奇数完成了隔行换色的案例

JQ中的CSS(隔行换色案例),设置样式对象.css("属性","值"); 添加样式对象.addClass("引入的样式")
删除样式对象.removeClass("删除的样式")

JQ对属性的操作(复选框案例)attr()和prop()两者方法基本一样,后者是新版本的产物.
设置属性JQ对象.attr("属性名","值"),设置多属性对象.attr({"属性":"值","属性1":"值1"});
获取属性值JQ对象.attr("属性名")
删除属性JQ对象.removeAttr("属性名")

JQ的DOM操作(省市二级联动)内部插入append 例:a.append(c) 将c插入到a的内部的后面
appendTo 例:a.appendTo(c) 将a插入到c的内部的后面.还有外部插入
删除empty()清空元素,remove自杀
数组的遍历1.$(数组).each(function(i,n){}) 参数i为索引 ,n代码是索引对应的值
$.each(arrs,function(i,n){}) 参数同上

JS好多行的代码,JQ几行就搞定了.JQ强无敌

汪志阳:
今天学习了JQ(JQuery),jq相当于对js进行封装,是一个js的类库,他主要让我们写
更少的代码,达到比之前js代码更好的效果.
首先要导入jq的文件,有点像java的导包,然后就是他 语法使用.jq是随着html文件树状图的加载
就加载了,相率比js高,而且可以执行多次.首先要定义页面加载事件$(function(){})这是jq的入口,相当于js中
window.onload=function(){};要保证页面加载成功后,才能使用jq的事件
jquery对象.事件名称
js和jq有着本质上的区别,获取的对象都是自身的对象,要调用对方的函数需要转换.js转为jq:$(js对象)
jq转为js:jq对象[0].接下来就是今天的案例,以及一些函数的使用:
案例一:广告显示与隐藏
这个案例使用js与jq都需要先运用window的setInterval函数进行时间的短暂设置,页面加载事件的设置有所不同,
$("#img2").show(),在jq中直接利用对象名调用show(),hide()函数达到显示的效果,也可以使用fidein(),slideup
滑出和淡出达到更炫的效果."()"可以控制函数的完成时间,其他地方相对js没有多大改变.
案例二:隔行换色和全选框的运用
在这个案例中jq的简便效果发挥到了极致,运用$("tbody tr:odd").addClass("odd");首先通过$("元素"),元素选择器
选择tbody中的行标签,在引用odd和even的过滤,直接选中所需的行,在利用check判断,addclass添加样式,到达效果,不需要
像之前js 的遍历与if的判断,jq到达事半功倍的效果.
案例三:省市联动
在省市联动中学到了数组新的定义方式var arr=[[ ]]在数组中再嵌套数组,通过$(数组).each(function(i,n))遍历外层数组获得省份,
每个索引所对应的值都是一个市的数组,在遍历内层数组得到城市信息,在利用append追加信息,写入城市信息完成省市联动.
整体思路与js没有什么区别,在数组的定义上和内部城市信息的插入更加方便,理解起来更加贴切思维,代码的量也大大减少了.
对于一些其他的选择器的使用,记不住就要多查询API文档.

谢洪彬:
jQuery
   概述: Js的类库,框架,对js进行封装
   使用:导入js文件到项目中
   作用:可以代码写的少,效果做的好
   jQuery的核心:选择器

JQuery和js执行的区别:
   JQuery可以执行多次
   Js只能执行一次
JQuery和js执行的顺序:
   Window.onload 等页面加载完成后执行改方法
   $():等页面的DOM树绘制完成后执行

jQuery不能使用js的方法,同样的js也不能使用jQuery的方法,但是二者之间可以互相转换
jQuery转js
   1.js对象[0]
   2.Js对象.get(0)

  Js转jQuery
   $(js对象)

Jq的常用效果函数
  show()   显示
  hede()   隐藏
  slideDown 向下滑动
  slideUp 向上滑动
  fadeIn() 淡入
  fadeout 淡出
  animate 自定义动画
  toggle 单机切换元素

Jq的基本选择器
   Id选择器 $(“#id”)
  类选择器 $(“.类名”)
  元素选择器 $(“.元素名称”)
  通配符选择器 $(“*”)  --所有
  并列选择器   $(“选择器1,选择器2....”)

Jq的层级选择器
  后代选择器  使用空格
  子元素选择器 使用 >
  下一个元素(同辈) 使用 +
  兄弟元素(后面所有同辈的) 使用~
  基本过滤选择器:可以根据指定位置找到指定元素
  eveno:偶数
  odd:奇数
内容选择器:根据指定内容找到所在的元素

属性选择器
  表单选择器
  表单属性选择器

文档操作
Append 添加
Html 覆盖

Jq的遍历两种方式
  1.$.each(数组对象,function(i,n){
  })
  2.$(数组对象).each(function(i,n){
  })

张育辉
jQuery层级选择器总结:
                JQ是一个轻量级的js库.写的少做的多;
               
                实例:
               
                <script>
                        $(function(){
                                // 后代选择器:
                                $("#but1").click(function(){
                                        $("body div").css("background","#bbffaa");
                                        //结果:boty下面所有的div都变色,包括span子div,
                                });
                               
                                // 子元素选择器
                                $("#but2").click(function(){
                                        $("body > div").css("background","#bbffaa");
                                        //结果:boty下面的id=兄弟的都变色,不包过兄弟下面的子元数,
                                });
                               
                                // 查找下一个兄弟的元素
                                $("#but3").click(function(){
                                        $("#兄弟2 + div").css("background","#bbffaa");
                                        //结果:兄弟2下面的第一个同级的div也就是兄弟3变色,不包过兄弟3的儿子,
                                });
                               
                                //查找下面所有兄弟的元数
                                $("#but4").click(function(){
                                        $("#兄弟2 ~ div").css("background","#bbffaa");
                                        //结果:兄弟2下面的所有同级的div变色,也就是(兄弟3~兄弟5,不包过兄弟1&&他们的儿子)都变色;
                                });
                                ======基本过滤选择器=======
                                $("#but1").click(function(){
                                        $("兄弟3 div:first").css("background","#bbffaa");
                                        //结果:兄弟3所有下面div第一个变色(兄弟3_子1变色)
                                });
                                $("#but2").click(function(){
                                        $("#兄弟3 div:last").css("background","#bbffaa");
                                        //结果:兄弟3所有下面div最后一个变色(兄弟3_子2变色)
                                });
                                $("#but3").click(function(){
                                        $("div:odd").css("background","#bbffaa");
                                        //结果:所有奇数行变色
                                });
                                $("#but4").click(function(){
                                        $("div:even").css("background","#bbffaa");
                                        //结果:所有偶数行换色
                                });
                                $("#but5").click(function(){
                                        $("#兄弟3 div:eq(1)").css("background","#bbffaa");
                                        //结果:兄弟3下面的子元数索引为1的元数变色,(兄弟3_子2变色);
                                });
                               
                        });
                       
                </script>
               
               
               
                <boty>
                        <div id="兄弟1">
                                <div class="mini"></div>//兄弟1_子1
                                <div class="mini"></div>//兄弟1_子2
                                <div class="mini"></div>//兄弟1_子3
                                       
                        </div>
                        <div id="兄弟2">
                                <div class="mini"></div>//兄弟2_子1
                                <div class="mini"></div>//兄弟2_子2
                        </div>
                        <div id="兄弟3">
                                <div class="mini"></div>//兄弟3_子1
                                <div class="mini"></div>//兄弟3_子2
                        </div>
                        <div id="兄弟4">
                                <div class="mini"></div>//兄弟4_子1
                        </div>
                        <div id="兄弟5">
                                <div class="mini"></div>//兄弟5_子1
                        </div>
                        <span>
                                <div class="mini">//span子div
                               
                                </div>
                        </span>
               
                </body>
                ======内部插入===========
                               
                        1:append();          
                                实例: a=<option id="a"></option>
                                          c=<select id="c"></select>       
                                a.append(c) 将c插入到a的内部的后面//结果: <option id="a"><select id="c"></select></option>
                        2:appendTo               
                                a.appendTo(c) 将a插入到c的内部的后面//结果:<select id="c"><option id="a"></option></select>       

黄进安:

1.      JQuery是将js常用的一些操作进行封装的一种框架,大大提高了开发的效率

2.      在使用JQuery之前要进行导入操作,类似于Java的导包操作

3.      JQuery与js的内容(方法和属性)是相对独立不可公用的,但是可以通过相互转换来进行相关对象操作,

相互转换:

JQuery--->js:  $(“选择器”)[0]或者$(“选择器”).get(0)   

-------->索引一定为0吗???为什么???

Js--->JQuery:  $(js对象)

4.      JQuery的事件名与js相比相差on,比如今天用到的click&onclick和change&onchange

案例:

1.      广告的弹出:

使用了封装好的显示和隐藏方法:show();hide();

更多的弹出方式:下滑与上拉;淡入与淡出;

2.      表格的各行换色:

使用了JQuery中的外部样式的CSS

添加样式: JQ对象.addClass("引入的样式")

3.      复选框的全选与全不选

使用了prop对JQuery对象属性进行了操作

建议使用prop方法,因为attr存在js版本不兼容的问题

4.      省市联动联动案例

通过JQuery的DOM的方法进行操作---->$(“构造器”).append(“要添加的内容”)

颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中

白有旺
引入方式:
    script src = "..."
jQuery入口函数,页面一加载执行的入口
    JS:window.onload = function(){};
    jQ:$(function(){});
    区别:JS只能使用一次,在页面加载完后执行
        JQ能重复使用,在DOM树完成后执行
jQ的对象
    JS:var j = document.getElementById("d1");
            j.innerHTML="";
    jQ:var i = $("#d1");
            i.html("");
JS跟JQ的转换
    JS-->JQ:$(j);
    JQ-->JS:1,jq[0] 2,jq.get(0);
jq的效果
    show();
        jq(jq对象).show();参数可以参考API
        其它效果跟show一样 slide(滑动) fade(褪色)....
广告显示跟隐藏
    原理跟之前的JS一样 只不过将一些复杂的代码封装了 ,使用了 $符号 ;
    涉及到了选择器而已,调用了自己的显示和隐藏方法
基本选择器
    ID 类 元素 通配符 并列(,)
层级选择器
    空格  后代
     >   子代
     +   下一个同辈元素
     ~   下面所有的同辈元素
基本过滤选择器
    以 : 开头
    first last even(偶数) odd(奇数)...
属性选择器
    [属性名]  [属性名 = 值]
表单选择器
    : 后面可以加表单的类型   button text input submit password checkbox

以前的几个案例要弄懂

郑雪平

今天学了JQuery,它是JSd的一个类库,对JS进行数据封装.它具有的优势是写的少做的多,让代码变得更简便.学了JQuery的语法.知道了要使其生效就需要引入JQuery的JS文件.具体方法如下:
<script src="../../js/jquery-1.8.3.min.js"></script>
JQ与JS对象不能互相访问,需进行转换.JQ的选择器也有好多种,分别为1.基本选择器;2.层级选择器;3.基本过滤选择器;4.属性选择器;5.内容选择器;6.表单选择器;7.表单属性选择器.

Ø        JQuery的常见事件有非常的多:change,submit,click,focus,unload,mouseup,mousedown,keyup,keydown,mouseout;
Ø        JQuery的遍历方式有两种:一.$.each(objects,function(x,y){
   
});
二.$("").each(function(x,y){
});

陈昆明:
今天对JQ进行了入门的学习,它是基于JS的类库,方便我们对文档进行操作
由于Jquery本身就是基于JS的思想,所以在使用上思想基本一致,只是用了特殊字符进行了包装而已
其基本格式是:
a.首先找到对象
b.确认事件
c.调用函数
d.对文档进行操作
以$(function(){ })为例,其本质其实是$(document).ready(function{ }),也就是先找到document对象,然后确立ready事件,进而调用function函数,然后在函数中对文档进行操作
在使用JQ属性和方法时,一定要注意,只有当你的对象是JQ对象时才能使用JQ的属性和方法,否则需要你先对对象进行转换,至于方法和属性,记住常用的就行,其他的有个印象,没事常翻API

林恒山
JQuery是对js的封装,是一个轻量级的类库.JQuery的语法是$("选择器").与js的区别是两者之间的函数与属性不能互相使用对方的.js转JQuery对象$(js对象),而JQuery转js对象则是JQ对象[index]或者JQ对象.get(0);
与js的事件相比,大部分的JQuery事件跟js事件的区别只是去掉on,也有一部分完全不一样,比如js的onload事件,JQuery加载事件则是$(function(){});或$(document).ready(function(){});
JQuery现实与隐藏效果的方法有:show()/hide();向下滑入与向上滑出slideDown()/slideUp();淡入淡出:fadeIn()/fadeOut.
JQuery选择器有:基本选择器:id选择器$("#id");类选择器$(".class");元素选择器$("元素名称");通配符选择器$("*");并列选择器$(选择器1,选择器2...);层级选择器:后代选择器两个选择器之间用空格隔开;子元素选择器两个选择器之间用>隔开;元素下一个同级元素用+隔开;同级元素下的所有同级元素用~隔开;属性选择器:[属性名]指定属性名的元素;[属性名='值']属性名等于值;
JQuery设置样式格式:JQ对象.css("属性名","值");多个属性值的格式JQuery对象.css({"属性名":"值","属性名1":"值"});添加样式:JQuery对象.addClass("样式");删除样式:JQuery对象.removeClass("样式");
JQuery属性的操作:通过JQuery对象.attr()或者prop();设置属性:单个属性JQuery对象.attr("属性名","值")多个属性JQuery对象.attr({"属性名":"值","属性名1","值"});获取属性名:JQuery对象.attr("属性名");删除属性JQuery对象.removeAttr("属性名");
JQuery的DOM操作:内部插入JQuery对象.append()/JQuery对象.appendTo(),数组遍历JQuery对象(数组).each(function(i,n){})或者JQuery对象.each(function(i,n){})