js/jQuery/vue练习

1. 把页面中的所有P元素的背景色设置为红色的正确query代码是（ D ）
   A．$(“p”).manipulate(“background-color”,”red”)
   B. $(“p”).layout(“background-color”,”red”)
   C. $(“p”).style(“background-color”,”red”)
   D. $(“p”).css(“background-color”,”red”)

2、以下哪个jquery方法用于隐藏被选元素？ B
A. hidden()
B. hide()
C. display(none)
D. visible(false)

解析：visible(false)，设置元素不可见，除了hide()

3. 以下哪种jquery函数用于设置被选元素的一个或多个样式属性？（ C ）
   A．style()
   B. html()
   C. css()
   D. text()
   解析：A,没有该方法。
   4.将所有div的高度设置为100像素的正确jquery代码是（ B ）
   A. $(“div”).height=”100”
   B. $(“div”).height(100)
   C. $(“div”).yPos(100)
   D. $(“div”).width(100)

5 下面哪一个是用来追加到指定元素的末尾的?( C )
A、insertAfter() B、append() C、appendTo() D、after()

解析：$(selector选择器).append(content)。
content.appendTo(selctor选择器);content一般是需要添加的元素标签

6. 以下哪个不是jquery的函数（ D ）
   A． each（） B.size() C. length D.onclick()

7. 在jquery中想要找到某元素的同辈元素，下面哪一个是可以实现的？（ C ）
   A、eq(index) B、find(expr) C、siblings([expr]) D、next()

8. 如果想要找到一个表格的指定行数的元素，用下面哪个方法可以快速找到指定元素? C
   A、text() B、get() C、eq() D、contents( )

9. 在jquey中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的?( C )
   A、delete() B、empty() C 、remove() D、removeAll()

解析：JQuery没有removeAll()方法

10. 在jquery中，想要给第一个指定的元素添加样式，下面哪一个是正确的? ( D )
    A、first B、eq(1) C、css(name) D、css(name,value)

11. 在jquery中，如果想要获取当前窗口的宽度值，下面哪个是实现该功能的? ( A)
    A、width() B、width(val) C、width D、innerWidth()

12. 怎么才能隐藏下面的元素？ C
    <input id=”id_txt” name=”txt” type=”text”value=””/>
    A. $(“id_txt”).hide();
    B. $(#id_txt).remove();
    C. $(“#id_txt”).hide();
    D. $(“#id_txt”).remove();

13. 在jQuery中      AB
    $( ‘#hello’ ).css ( “color”，"#f0000" )
    $( ‘#hello’ ).css ( “color”" )
    分别表示的含义是:
    A. $(‘#hello’).css(“color”,#0000)表示选择id为hello 的元素，并设置颜色为"f0000"
    B. $( ‘#hello’ ).css ( “color”" )表示选择id为hello 的元素，并且取到该元素的颜色
    C. $(‘#hello’ )css(“color”“f0000”)表示选择CSS类为hello的元素，并且取到该元素字体显示的颜色
    D. $(‘hello’)css(“color”)表示选择CSS类为hello 的元素，并且取到该元素字休显示的颜色

14. 在jquery中，选中class值为myClass的所有元素，正确的是( A )
    A、$(".myClass") B. 、$("#myClass") C、${*} D、${‘body’}

15. 以下()选项不能够正确地得到这个标签对象？B
    <input id=“btnGo” type=”button” value=”点击”class=”btn”>
    A.$(“#btnGo”)
    B.$(“.btnGo”)
    C.$(“.btn”)
    D.$(“input[type=’button’]”)

16.在jQuery中想要找到所有元素的同辈元素，下面哪一个是可以实现的（ B ）
A nextAll([expr])
B siblings([expr])
C next()
D find([expr])

填空题

1. 在一个表单中，如果将所有的div元素都设置为绿色，jquery的代码实现是___$(“div”).css(“color”,“green”);____

2. 在<ul>元素中,添加了多个<li>元素,通过jquery选择器获取最后一个<li>元素的代码实现是 : $(“ul li”).eq($(“ul li”).length-1);或

3. 在三个<ul>元素中,分别添加多个<li>元素,通过jQuery中的子元素选择器,将这三个<ul>元素中的第一个<li>元素隐藏的代码是: $(“ul li : first-child”).hide()_

4. 在jquery中，想让一个元素隐藏，用方法 hide() 实现，显示隐藏的元素用方法 show() 实现

5. 现有一个表格，如果想要匹配偶数的行，用选择器_even实现，奇数的行用选择器odd___实现

6. jquery访问对象的size()方法的返回值和 jQuery对象的length 属性一样

7. jquery中 $(this).get(0) 的写法和 $(this)[0]是等价的。

简答
1.vue引入方式

<script src= "url" style="text/javascript" charset="utf-8">

2.什么是MVVM框架

MVVM是Model-View-ViewModel的简写,模型-视图-视图模型。
【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

3.什么双向绑定？怎么实现？

双向绑定：通过指令v-model，修改一方同时修改相同的另一方，达到数据同时更新。主要用于在表单控件元素上创建双向的数据绑定，根据表单上的值，自动更新绑定的元素的值

4.vue常用指令及其作用

vue 指令：是带有" v- "前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用在DOM上

1.v-text(展示文字)
2.v-html(显示HTML内容)
3.v-if判断。判断条件写在属性值里
4.v-else 除了 v-if中的条件执行的都是v-else文本。
v-else 和v-else -if 需要和v-if结合使用
v-if满足条件把内容加载进DOM

5.v-show 控制显不显示
根据表达式的真假值，切换元素的 display CSS property。
6.v-for 循环遍历；
一个参数：得到的是数组中的元素/对象的属性值

v-for="遍历出来的数 in 集合/数组/对象"
<li v-for="hobby in hobbys">{{hobby}}</li>
<li v-for="p in person">{{p}}</li>
<!-- 遍历出来的每个对象的值 -->

两个参数:
遍历数组时：第一个是数组的元素，第二个数组下标 （数组元素，下标）
遍历对象时：第一个参数是属性值，第二个参数是属性名 （对象属性值，对象属性名）

对于三个参数的一般用于遍历对象的
三个参数：多用于遍历对象，（属性值，属性名，下标）
{{i}}.{{k}}:{v}
{{i}}:当前属性在对象中的位置，
{{k}}属性名
{{v}}：对象属性值

<li v-for="(v,k,i) in person">{{i}}.{{k}}:{v}</li>

7.v-bind 属性绑定（可简写为：冒号）
当属性的值是变量而不是字符串时，通过v-bind进行表示，vue会自动处理
<a v-bind:href="url">百度一下</a> <a :href="url">百度一下</a><!-- 简写形式 -->

8.v-on(事件绑定（可简写成@）)

 <!-- 单击事件click，方法名自定义-->
 <button v-on:click="click()">单击</button>
 <button @click="click()">单击</button>
<button v-on:dblclick="click()">双击</button>
<button @dblclick="click()">双击</button>`

5.js怎么获取元素对象？jq怎么获取？vue怎么获取？

js:
document.getElementById(“Id属性值”);返回单个元素对象
document.getElementsByClassName(“Class属性值”);返回对象数组
document.getElementsByName(“name属性值”);返回对象数组
document.getElemetnByTagName(“标签名”);通过标签名获取，返回对昂数组

jq:
(1)基本选择器
$("#id属性值");通过id选择器获取
$(".class属性值");通过class类选择器
$(“标签名”);通过元素选择器
$(“标签名, 标签名,……”);多元素选择器，多个元素用逗号隔开
$("*");任意元素选择器

(2)层级选择器
$(“标签名 子标签名”);
$(“id选择器 子标签名”);
$(“选择器+子标签名”)
$(“选择器”).next();选中被选元素的下一个紧邻的兄弟元素.
$(“选择器”).nextAll()后面所有元素

$(“div span”) – 选中所有div内部的所有span元素
$("#one span") – 选中id为one的元素内部的所有span元素
$("#two+span") – 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next(“span”) – 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev(“span”) – 选中id为two的元素前面紧邻的span兄弟元素
$("#two~span") – 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll(“span”) – 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll(“span”) – 选中id为two的元素前面所有的span兄弟元素
$("#two").siblings(“span”) – 选中id为two的元素前、后所有的span兄弟元素

(3)过滤选择器
$(“selector:first”);获取被选中元素中的第一个元素
$(“selector:eq(index)”);获取被选中元素中的指定下标的元素
$(“selector”).eq(index);eq(index)是一个方法，可以单独拿出来
$(“selector”).eq(n);选中被选元素的第n+1个元素(n从零开始) :

(4)表单选择器
可以获取 输入框 input，文本域(textarea)、下拉列表select、单选框(radio)、复选框(checkbox)
$(":input") 匹配所有控件
$(":password") 匹配所有密码框
$(":radio") 匹配所有单选
$(":checkbox") 匹配所有多选
$(":checked") 匹配所有选中的单选多选和下拉选
$(“input:checked”) 匹配所有选中的单选和多选
$(":selected") 匹配所有选中的下拉选

(5)属性选择器

$("div[属性名]")  匹配包含xxx属性的div
$("div[属性名='值']") 匹配某个属性名等于某个值的div
$("div[属性名!='值']") 匹配某个属性名不等于某个值的div

6.关系型数据库和非关系型数据库的区别？

• （二者存储数据的方式不同）
• 关系型数据库（线性数据库）: Oracle、MySQL、SQLServer、Access
• 非关系型数据库（非线性数据库，相当于集合，散列结构）: MongoDB、Redis、Solr、ElasticSearch、Hive、HBase

编程题
1.自选3张图片，使用jquery完成轮播图。
2.使用jQuery完成省市区三级联动
3.数据库课上练习自己写一遍