黑马程序员技术交流社区
标题: 【厦门JavaEE就业1期-每日总结】JQuery [打印本页]
作者: 厦门校区 时间: 2018-5-20 19:12
标题: 【厦门JavaEE就业1期-每日总结】JQuery
本帖最后由 厦门校区 于 2018-5-20 19:16 编辑
同学们，以下是今日任务，以案例为主。今日重点是掌握JQuery基本选择器（其他选择器不需要背诵记忆，对照会使用即可）和DOM操作，要求每位同学可以完成以下案例，然后以口语化的方式在评论区提交你的每日总结，谈谈你对今日重点知识的理解!
- 使用JQuery完成页面定时弹出广告
- 使用JQuery完成表格的隔行换色
- 使用JQuery完成复选框的全选效果
- 使用JQuery完成省市联动的效果
作者: 许大炮 时间: 2018-5-20 20:22
本帖最后由 许大炮 于 2018-5-20 20:37 编辑
许剑鸿 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使代码变的简洁且功能较之前更为丰富
作者: 磬辰 时间: 2018-5-20 20:44
林文辉
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也是前端主流的开发框架,应多加练习和运用.
作者: 六道的骸6 时间: 2018-5-20 21:33
张裕
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了
作者: seilye 时间: 2018-5-20 21:36
叶身辉:
今天学习了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开关
作者: 偏离X 时间: 2018-5-20 21:40
郭明杰:
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的标签**
作者: 偏离X 时间: 2018-5-20 21:40
郭明杰:
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的标签**
作者: lnongge 时间: 2018-5-20 21:42
16weisong
今天学习JQ知识,只要能说出JQ和JS的不同之处即可掌握.如js对象和jq对象如何转换?二者的执行时机?jq的事件?jq的选择器?jq的操作元素css的方法,操作属性的方法?操作DOM的方法?以上均和js对应部分知识比较清楚差别即可掌握今天的知识.
作者: rkko 时间: 2018-5-20 21:47
杜石苇
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获取元素，绑定事件的方法才是重中之重。
作者: chenyelong 时间: 2018-5-20 21:49
陈叶隆
首先要导入.js文件,然后在<script>里面创建加载项$(function(){});然后要选好选择器,这个很关键,选择器选得好,往往可以事半功倍.获取操作对象的控制权后,对对象的属性进行增(append())删(remove())改(prop(“属性名”,”属性值”))查(prop(“属性名”))的操作.JQ里有两种遍历数组的方式:$(arr).each(function(i,n){})和$.each(arr,function(i,n){}).//i是索引值,n是子元素.
作者: 李志勇 时间: 2018-5-20 21:50
李志勇:
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){}) 等一些常用的函数 功能
作者: Eclipse启动 时间: 2018-5-20 21:51
郑阳阳
今天学习了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强无敌
作者: 铁木啊童臂 时间: 2018-5-20 21:51
汪志阳:
今天学习了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文档.
作者: 小故事 时间: 2018-5-20 21:51
谢洪彬:
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){
})
作者: finfin12 时间: 2018-5-20 21:51
张育辉
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>
作者: 凉面要趁热吃 时间: 2018-5-20 21:53
黄进安:
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中
作者: avip0000 时间: 2018-5-20 21:54
白有旺
引入方式:
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
以前的几个案例要弄懂
作者: 厦门黑马王子 时间: 2018-5-20 21:54
郑雪平
今天学了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){
});
作者: conan75 时间: 2018-5-20 21:54
陈昆明:
今天对JQ进行了入门的学习,它是基于JS的类库,方便我们对文档进行操作
由于Jquery本身就是基于JS的思想,所以在使用上思想基本一致,只是用了特殊字符进行了包装而已
其基本格式是:
a.首先找到对象
b.确认事件
c.调用函数
d.对文档进行操作
以$(function(){ })为例,其本质其实是$(document).ready(function{ }),也就是先找到document对象,然后确立ready事件,进而调用function函数,然后在函数中对文档进行操作
在使用JQ属性和方法时,一定要注意,只有当你的对象是JQ对象时才能使用JQ的属性和方法,否则需要你先对对象进行转换,至于方法和属性,记住常用的就行,其他的有个印象,没事常翻API
作者: wahahaha 时间: 2018-5-20 21:54
林恒山
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){})
作者: 5119 时间: 2018-5-20 21:55
游荣辉
JQ总结
JQ的底层结构就是JS
JQ就是对JS进行封装.就是为了少打代码
想要使用JQ 第一步必须先引入JQ的js文件
然后是使用语法,语法有两种
$("选择器")
jQuery("选择器")
学习JQ最重要的就是选择器的使用,我们常用的选择器有
id选择器 $("#id名")
类选择器 $(".类名")
元素选择器 $("元素名(标签名)")
通配符选择器 $("*")
并列选择器 $("选择器,选择器")
后代选择器 $("a (空格)b")
子元素选择器 $("a>b")
下一个选择器 $("a+b")
兄弟选择器 $("a~b")
属性选择器 [属性名]或者 [属性名= 属性的值]
还有的去查api
还有JQ的事件跟JS的事件有点不同,就是JQ的事件没有加on.
JQ的显示方法可以查api 它们都可以直接拿对象直接调用,括号里也可以写一些参数.
JQ可以改变样式,使用.css(象牙修改的样式),或者是添加一个样式addClass,删除一个样式removeClass
JQ的DOM操作, 插入方法 a.append(c) c插入到a的后面 a.appendTo(c) a插入到c的后面
删除 empty,可以删除所有的子元素, remove 删除所有元素加上自己
还有数组的遍历 $(数组名).each(function(i,n){}) i=索引 n=对应索引的值
$.each(数组名,function(i,n){})
作者: 1748341437 时间: 2018-5-20 21:56
林玮
今天学习了JQuery,JQ是JS的一个类库,我也不知道类库是什么,反正我只知道,JQ比JS更简单一些,书写更加简便一些,,只是要记得事件很多,方法也很多,不过没关系我有API,边查边记慢慢积累,总有一天会都记住的.
(注:由于JQ的两个页面加载事件效果完全相同所以本人是推荐使用前者,JS就一种加载事件所有就那样了;)
(他们都是等"树"加载到内存他们在运行的)
JQ和JS的页面加载事件也是不同的,JQ是:$(function(){事件})=$(document).ready(function(){事件}),JS是:window.onload = function(){事件}
(JQ使用的时候都要加$通配符)
JQ的选择器跟JS的区别不大,叫法都一样,只是用法不一样:
常用的有:
☆id选择器--$("#id"):
☆类选择器--$(".类名")
☆元素选择器--$("元素名称")
☆通配符选择器--$("*")
并列选择器--$("选择器,选择器,选择器")
(常用选择器几个都是顾名思义,id选择器是通过id来使用的,可以选中所有id名相同的标签,后面类和元素使用都差不多,选中后再进行操作,还有一个不同的是并列选择器,他是选中引号里选择选择器指定的地儿,重点要讲的是通配符选择器,他可以选中所有元素,所以如果你操作所有标签的话它是最好的选择.)
好了其他的也没什么好讲的了,反正有万能的API,虽然不能过分的依赖API,但是东西实在太多了,而且听轩哥那意思web以后好像也不用我们写所以...(你懂得)
作者: doudou0606 时间: 2018-5-20 21:56
day05
施炎生
1.JS对象和JQ对象是可以相互转换的
JS->JQ $(JS对象)
JQ->JS 第一种方式 : JQ对象[index] 第二种方式: JQ对象.get(index)
2.JQ的显示效果
show()--hide()
slideDown()--slideUp(）
fadeIn()--fadeOut()
toggle()-- $("button").toggle(function(){ 把function(){show()},function(){hide()}方法写在这个大括号里面 }) 可以实现按一下按钮弹出广告，再按一下关闭广告
3.重点掌握的选择器
基本选择器
层级选择器
属性选择器
4.今日需掌握案例：
案例一：使用JQuery完成定时弹出广告
a.注意在页面中广告应首先设置为隐藏（style="display:none;")
b.<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
c.使用$（function(){ 方法写大括号里面 }) 触发事件
d.写方法
案例二：表格隔行换色
第一种方法：$("body div:even").css("background-color","black");
第二种方法：$("body div:odd").addClass("even");注意：应在前面导入CSS文件<link rel="stylesheet" href="../css/style.css" />
案例三：使用JQuery完成复选框的全选和全不选
$selectAll.prop("checked")等于this.checked
案例四：使用JQuery完成省市二级联动
作者: 沅瞻 时间: 2018-5-20 21:58
詹源
今天学习了jQuery
什么是jQuery,和JS有什么关系.JQ有什么作用
jQuery是JS的框架,对JS进行封装.JS是jQuery的基础.JQ的作用是写更少的代码,执行更多的功能
JQ和JS不能使用对方的方法和属性,如果想使用对方的方法或者属性,必须先进行对象转换
要使用JQ,必须引入CSS文件和JS文件.
如何实现JS,JQ对象转换
JS->JQ 简便写法:$(JS对象)
JQ->JS 第一种方式:JQ对象[index]
第二种方式:JQ对象.get(index)
事件应用
JS中事件前都要加on,JQ中直接写名字,不需要加on
JQ中页面加载成功事件与JS不一样:简便写法:$(function(){ });
完整(复杂)写法:$(document).ready(function(){ });
(重点)JQ中的选择器.(常用)基本选择器: id选择器---用法$("#id")
类选择器---用法$(".类名")
元素选择器---用法$("元素名称")
通配符选择器---用法$("*")
并列选择器---用法$("选择器,选择器,选择器")
层级选择器: a b:选择a下面所有的b(即所有是b的,包含子孙辈)
a>b:选择a下面所有第一层是b的.(即a的子辈.不包括孙子重孙辈)
a+b:选择a下面,b后面的元素
a~b:选择a下面,b前面的元素
属性选择器: [属性名]:有指定属性的元素
[属性名='值']:有指定属性和值的元素(选择范围更加精确)
JQ中的CSS操作
设置CSS:jq对象.css("属性","值").
也可设置多个属性. css({"属性":"值","属性1":"值1"})
例:$("tbody tr:even").css("background","blue")
添加样式:JQ对象.addClass("引入的样式")
例:$("tbody tr:even").addClass("even")
删除样式:JQ对象.removeClass("删除的样式")
JQ中文档对象(DOM)操作:
内部插入:append a.append(c) c插入a的内部后面
appendTo a.appendTo(c) a插入c的内部后面
外部插入:a.arter(c) a后面插入c
a.before(c)a前面插入c
a.insertAfter(c)a插进c内部后面
a.insertBefore(c)a插进c内部前面
删除:empty():清空元素(所有子标签)
remove():把自己删除掉
作者: Yanmo_ 时间: 2018-5-20 21:58
颜琳琳
今日学了对JS进行封装,是JS的类库JQuery.分别学了JQuery的使用,事件,效果,css,选择器,对属性的操作,DOM的操作.
1.JQuery的使用:
1.JQ的导入:<scrip src=”要导入的JQuery的版本文件”></Scrip>
2.JQ的语法: $(“选择器”) JQuery(“选择器”)
3.JS和JQ区别: JS在随着页面加载且只能加载一次,而JQ在等页面中的DOM树状加载完加载且多次加载;
Js--->Jq $(JS对象)
Jq--->js Jq对象(index) Jq对象.get(index)
2.JQuery事件:
该事件和js事件类似,只是比js事件中少了on,且页面加载的写法有两种1. $(function(){}); 2. $(document).ready(function()){};这两种方法必须要在JQuery使用前加载,否则会无法使用.
3.JQuery效果:
JQuery的效果只要有显示show(),隐藏hide(),向下滑出slideDown(),向上滑入slideUp(),淡出fadeOut,淡入fadeIn();这几种效果的使用方法相同,如 1.jq对象.show();2.Jq对象.show(“毫秒数”), 3.Jq对象.show(毫秒值,function(){});
4.JQuery的CSS:(用于表格的隔行换色)
1.设置样式:JQ对象.css(“属性”:”值”) (css后面的属性和值可以添加多个用逗号隔开即可)
2.添加样式:addClass(“要引入的样式”)
3.删除样式:removeClass(“要删除的样式”)
5 .JQuery的选择器:
这部分的内容需要记住几种常用的选择器: 1. 基本选择器:有ID选择器 使用方法$(“#id”); 类选择器 使用方法$(“.类名”); 元素选择器 使用方法$(“元素名称”); 通配符选择器 $(“*”) (注:*号为所有的内容); 并列选择器 使用方法$(“选择器,选择器,选择器”)(注:该选择器中的选择器可以是任意类型选择器); 2. 层级选择器, 有后代选择器,如body div; 子元素选择器,如body > div; 子元素的下一个同辈元素,如body + div; 兄弟选择器如:body ~ div; 3. 属性选择器 [属性名] [属性名=’值’]
还有一部分选择器只需知道怎么用即可: 1.基本过滤选择器 有第一个:first; 最后一个:last; 偶数:even, 奇数:odd, 索引= :eq(index), 索引> :gt(index), 索引< :It(index)
2.内容选择器 :contians() , 3.表单选择器 :checkbox()下拉列表, :text()文本, :password()密码框等.(注意:这些选择器在使用前都要加冒号( : )).
6 .JQuery对属性的操作:
1.有attr()和prop(),这两种用法一样,只是attr()的JQuery的版本比较低,只能在1.8前的版本使用,prop()用于1.9以上的版本,prop的方法有1.设置属性: JQ对象.prop(“属性”:”值”) 2.添加属性: JQ对象.prop({“属性”:”值”,“属性”:”值”,“属性”:”值”}) 3.删除属性: JQ对象.removeprop(“属性名”)
7 .JQuery的DOM属性操作:
1.内部插入: append 例: a.append(c) 将c插入a的内部后面 appendTo 例: a.appendTo 将a插入c的内部后面
2.外部插入; 3.删除: empty() 清空子元素 remove() 清空元素包括自己
3.数组的遍历:1. $(数组).each(function(i,n){}) (其中i代表要遍历的元素的索引,n表示该索引所对应的值) 2. $.each(数组,function(i,n){}) (其中i代表要遍历的元素的索引,n表示该索引所对应的值);
作者: 渣.. 时间: 2018-5-20 21:59
柯威龙
今天学习了js的类库,对js进行包装的jq.学习了对jq的使用,事件,效果选择器,jq中的css
还有jq对属性的操作以及对DOM的操作.jq用的最多的就是$.
首先学习了对jq的使用.怎样引入jq的js文件夹.还有两种语法.首先学习了对jq的使用.怎样引入jq的js文件夹.还有两种语法.
一种是$("选择器"),一种是jQuery("选择器").在学习jq上面我发现不管是什么样的案例首先都要打页面加载成功的事件.
用jq实现广告显示的隐藏时学习了效果.总共有四种使用方法.其中最常用的还是jq对象.hide(毫秒值)
hide是隐藏的方法,显示的方法是show.经过多少毫秒显示或隐藏图片.让页面看起来更加的酷炫.jq种选择器较为多种.有三种中选择器
两种过滤.印象最深刻的是基本选择器.里面又有五种选择器.有一些之前学习js的时候有教过,多了通配符选择器
并列选择器.两种过滤基本和内容.设置css的样式.有设置多个属性和设置单个属性.单个属性的话是jq对象.css(属性,值)
多个的话就是在括号后面多写值.还有添加样式和删除样式.添加样式.addclass("引入的样式")删除样式:.remoeclass("删除的样式")
jq对属性的操作是prpo,理解不深.DOM的操作有两种插入,外部与内部,还有删除和遍历数组.删除的两种方法都比较残忍,一种是empty清空所有的元素
一种是remove把自己删除.遍历数组也有两种方式,但是一般掌握简单的那个就可以了,虽然说两个都差不多,但是方法二应该会更简单.
作者: w849027724 时间: 2018-5-20 21:59
吴利君
今天学习了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就不想写了！
作者: 厦门陈强 时间: 2018-5-20 22:00
陈强
Jquery的一天,其实今天课上的练习都集中下午的时段之后,导致多个案例在实现的时候,会有一点点思绪混乱掉.但是晚上重新整理一下每个案例的步骤和注意事项之后,还是那就话,灭有想象的复杂—哈哈~
今天的内容,大的当面就是如何使用Jquery的过程:
1,先导入Jquery的JS文件
2,建立页面加载的方式,就是相当于JS中的window.document=function(){}
3,然后就是根据选择器之间的组合,去获取想要得到的对象
4,获取到对象之后再进行其他的操作---加入效果\设置样式等等
发现,选择器之间的组合去获取对象很方便,比如隔行换色案例中,使用后代选择器和基本过滤选择器的组合,省市联动案例中的表单选择器和属性选择器的组合.
注意,省市联动案例中,对于二维数组的定义采用了另一种方式,但是使用起来和遍历都是一个道理, Jquery中的遍历与JS的不一样,有自己的格式,同样的是,不要忘记在触发第二次change事件的时候,对第二个下拉框中的数据进行清除.
整天下来,逻辑性比JS要强一点,但是代码量减少了很多~~
作者: LittleSky 时间: 2018-5-20 22:00
常小天
今天学习的是JQuery，JQuery是一个轻量级的JS类库，说白了就是将预先写好的Js代码封装成具有特定功能的函数，按照其语法规则调用函数方便快捷的实现各种对HTML的操作。说到其语法规则，这里必须强调JQ的选择器，JQ有大量的选择器可供选择，选择器的格式与JS中选择器的格式相同，只是JQ的选择器要放在$()的括号中，这里记得加上双引号。提一句JQ的触发事件，JQ的触发事件通常只需将JS的触发事件名称去掉on即可。JQ的方法记住常用的格式，以及JQ对象与JS对象互转调用对方的方法，其他没什么难度。JQ的重点还是在理解各种选择器上。选择器中药区分各种层级选择器，这里有一点需要注意，就是选择器中空格的含义。不像其他地方空格可以随便加而不会有什么影响，选择器中的空格要格外注意，因为后代选择器恰好是通过空格来连接父子对象的，所以空格在选择器中有特殊含义，不能随便加。例如要获取指定name的复选框对象，如果写成$(":checkbox [name = 'ids']")就会出错，因为中间的空格会使这个选择器成为一个后代选择器，它搜索的是复选框的子级别的name为“ids”的对象，所以必须连在一起写成$(":checkbox[name = 'ids']")才能找到正确的对象。
最后提一下想要使用JQ，第一步记得先把JQ的Js包导进来，并且要先写页面加载成功事件，在其中再写其他JQ代码。
作者: 名字被人注册了 时间: 2018-5-20 22:00
刘文峰
jQuery是JavaScript的一个框架,相比js,他可以用更少的代码做更多的事.他的语法有两种:$(“选择器”);jQuery(“选择器”)
jQ常用的选择器有三种:
基本选择器:id选择器 $(“#id”);元素选择器 $(“元素名”);类选择器 $(“.class”);
通配选择器 $(“*”) 可获得所有元素;并列选择器
$(“选择器1”,“选择器1”...) 可以是多个选择器
层级选择器:
a b :中间是空格,可以获得a元素下的所有b元素,包括子元素
a>b:获得a元素下的所有b元素,不包括子元素
a+b:获得a元素下指定的b元素的下一个b元素(两个b元素是平级关系),
a~b:获得a元素下指定的b元素后面的所有b元素(b元素是平级关系),
属性选择器:
$(“属性名”)
$(“属性名=值”)
jQ中的事件只要把js事件前的on去掉就行了;只有页面加载事件差别较大$(function(){})或$(documen).read(function(){}),且jQ可以同时有多个页面加载事件.
js和jQ对象不能互相使用双方的属性,但可以进行互转:
js转jQ $(“js对象”)
jQ转js $(“jQ对象”).get(0)
今天的案例:
图片的隐藏和显示,和js差不多,但是可选的效果更多,更好看
隔行换色;odd和even两种选择器可以直接获取奇数行和偶数行,效率更高
复选框全选;表单选择器可以直接获得所有复选框,
省市二级联动;可以直接使用方法遍历数组,还可以直接在元素后面添加元素,不用先创建再添加
作者: 13163997058 时间: 2018-5-20 22:01
本帖最后由 13163997058 于 2018-5-21 08:10 编辑
王刘锁
先说什么是JS:JavaScript是一种浏览器脚本语言,可以通过一些事件来对HTML元素做一些操作比如写入代码,改变页面样式,甚至让页面更动态!JS也是一种编程语言,虽然两者有很多语法上的相似之处.但是它和Java不是一回事!JS包括三个部分核心是ECMAScript标准脚本语言内容是一些语法和对象 其次是DOM文档对象模型,DOM把HTML文档加载到内存中以树的形状存在!这种树结构可以更有力的对文档内容进行查看和操作!再有就是BOM浏览器对象模型 ,BOM可以用来对浏览器的相关内容做一些操作 比如打开一个新的窗口!
那么今天学的JQuery是什么呢?通过学习了解到JQ其实是JS的一个框架一个包装类库,对JS做一定的封装.在简化了代码的同时提高了代码功能!也就是写得少,做得多!在使用JQ之前我们需要先把JQ库所在的.js文件导入页面 方式是
<head><script type="text/javascript" src="jquery.js"></script></head>
接下来就可以使用JQ了 那我们需要记住它的主要语法:$这符号相当于JQuery简化代码$("选择器")==JQuery("选择器")
这里就要说到选择器了:我们需要掌握的有基本选择器 层级选择器 属性选择器
1,基本选择器:
id选择器:$("#id值"),类选择器$(".class值"),元素选择器$("元素名"),
通配符选择器$("*")所有的内容都被选中!,
并列选择器:$("选择器1,选择器2....")
2,层级选择器:
元素1 元素2 : 中间用空格隔开是元素1的后代中所有的元素2
元素1>元素2:元素1的子代(只有一层血缘关系)中的所有元素2
元素1+元素2:元素1同级的在元素1后面的元素2只获取一个
元素1~元素2:元素2同级的在元素1后面的元素2获取所有!
3,元素选择器:
[属性名:]有指定属性的所有元素
[元素名="值"]指定元素值的所有元素
下面是JQ的DOM重点:
1,内部插入:元素1.append(元素2) 把元素2插入到元素1中1(每个元素1都会插入)
2,元素empty():清空元素所有的子元素不包含自己
元素remove()包括自己在内的所有子元素
3,数组的遍历; $(数组).each(function(i,n){})i是索引 n是索引多赢的值
$.each(数组,function(i,n){})
重点不多也挺好记 用起来也挺有意思!!
作者: 2902 时间: 2018-5-20 22:02
张清才 5-18 js
一般步骤;1.确定事件; 通过事件触发函数;在<script>标签内编写函数,
在函数主体上的代码实现我们想要的效果.
Dom 文档对象模型,dom常见的方法有获得元素(通过id;名字;标签获得)
获得后我们可以操作元素; 创建元素document.createElement();添加元素;
和删除元素,删除要通过上一级的元素对下一级的元素进行删除;
常见的事件有:
onfocus:获得焦点时触发该事件 onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发 onload : 页面加载事件
onclick: 点击事件 onchange : 下拉列表改变事件
ondblclick: 双击某个元素的事件 onmousemove : 鼠标被移动
onmouseout ;鼠标从某元素移开 onmouseover : 鼠标被移到某元素之上
onmousedown : 某个鼠标按键被按下 onmouseup : 某个鼠标按键被松开
onkeydown : 某个键盘的键被按下 onkeyup : 某个键盘的键被松开
onkeypress : 某个键盘的键被按下或按住
张清才 jq
Js的框架jq吧js封装起来,功能上是一样的,不过jq只要调用各种方法就可以实现目标
,和其宗旨一样 写的少,作用多.
学习了选择器 和技术相似比较常用的有
ID选择器
类选择器
元素选择器
通配符选择器
并列选择器
还有层级选择器
空格：元素的后代元素
> ：子元素选择器
+：下一个兄弟元素
~：后面的所有的兄弟元素
还有过滤选择器也是常用的,odd;even;等
通过show方法和其他效果,改写了昨天的广告弹出案例,代码简洁,效果更佳.
作者: q55w66 时间: 2018-5-20 22:02
王清松
JQuery:
1.JavaScript的类库，将其大部分功能进行封装，方便使用
2.learn more,do less
3.有点像工具类
事件：少个on
JS:onload事件
JQ:$(funciton(){}) $(document).ready(function(){})
JS->JQ: $(选择器)
JQ->JS: JQ对象[index] jQ对象.get[0]
今天主菜：记忆为主，详见API
作者: 滴滴eclipse启动 时间: 2018-5-20 22:15
江某人:
传统的js方式:页面加载的事件只能执行一次
JQuery: 可以执行多次
JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.
window.onload 等页面加载完成后执行该方法.
$(function(){}):等页面的DOM树绘制完成后进行执行.
格式: $相当于JQuery $(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
$(function(){ // 转成JS的对象:
alert(""); }) 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
使用方法:
// slow(慢速),normal(正常出现),fast(快速)
Jq对象.show(“slow”); //显示
使用三:Jq对象.show(毫秒值); // 1000
使用四:Jq对象.show(毫秒值,(函数)function(){});
hide(“slow”); //隐藏
使用三:Jq对象.hide(毫秒值); // 1000
使用四:Jq对象.hide(毫秒值,(函数)function(){});
slideDown(); --向下滑动
slideUp(); --向上滑动
fadeIn(); --淡入
fadeOut(); --淡出
animate(); --自定义动画
作者: 376091692 时间: 2018-5-20 22:59
凌辉:
今天学习了JQuery:
JQuery是一个JS的框架.对传统的JS进行了封装,可以达到写的更少,做的更多
熟知js和jq的转换,;
jq通过show(),hide(),等方法完成广告弹出;
jq的选择器很重要,常用的选择器要记住,特别是基本选择器,用的最多;
设置属性可以用attr()和prop(),用法一样;
jq的DOM操作内部要知道怎么插入和删除一级数组遍历
作者: COLDER 时间: 2018-5-20 23:01
本帖最后由 COLDER 于 2018-10-18 19:13 编辑
Day05
JQuery:JS的框架(类库),由传统JS封装而成,其底层还是由JS编写而成,
作用是让开发人员使用更少的代码实现同样的功能,在编写上更加高效.
今天的学习内容为以下几点:
1.JQ的文件引入,JQ的使用语法,JQ与JS的对象转换,
注意:
在使用JQ之前必须要引入JQ文件.
JQ与JS对象之间方法和属性不能混用.
2.JQ中的事件使用:主要学习JQ中的页面加载事件,点击事件,选择事件
注意:
JQ中页面加载可执行多次,必须在页面加载事件中编写功能实现.
3.JQ效果:广告的显示和隐藏中使用.
4.JQ的选择器:基本选择器,层级选择器,属性选择器
5.JQ对属性的操作:
设置属性:jq对象.prop("属性值","值");
获取属性:jq对象.prop("属性名");
移除属性:jq对象.removeProp("属性名");
6.JQ的DOM操作:内部插入,删除,数组遍历
内部插入:append()/appendTo()
删除:empty()/remover()
数组遍历:$.each(arrs,function(i,n){})
总而言之,掌握JQ中常用和重点的操作,学习查询API.
作者: 一梦 时间: 2018-5-20 23:02
陈世彪:
今天学习了JavaScript
JS是用来是浏览器脚本语言,使网页灵活起来
JS中变量的接收都是用var来接收的,JS当中的语法上的东西和java十分类似
window属于bom的最顶层,常用的方法有:
setInterval(“change()”,5000);隔多少毫秒执行
clearInterval清除
setTimeout(“change()”,5000);隔多少毫秒执行一次
clearTimeout清除
alert() : 弹出对话框
prompt("显示的文字",默认值);弹出一个可输入的对话框
open("域名","","width,height");打开一个新窗口
JS的两种引用方式两种：<script src = ""></script>
普遍使用 <script> 函数 </script>
window.onload = function(){ 就像静态代码块,优先执行这个
// 函数体
}
使用JQuery完成省市联动的效果时
要先创建二维数组,使用value匹配数组的索引来获得城市.
$city.get(0).options.length = 1;转成js再将数组长度改为1,来实现清空数组里的东西
最后判断是否相同,再使用jq的方法append来添加
作者: 张述明 时间: 2018-5-20 23:02
张述明
今天学习了JQuery 瞬间把jc完成的一些案例封杀 , JQuery十分简便的写出那些案例
主要要掌握的目标有
Jq和js的转换 js转jq $(js)
Js 和jq的转换 jq转js有两种形式() 一种是get(0),另一种是[0];
相互的转换可以让二者相互使用对方的方法
事件 页面加载 用$(function(){})
代替了js的onload
Jq的效果方法可以更加美观的完成广告页面弹出的案例
可以通过下面的方法
fadeOut(); --淡出
fadeIn(); --淡入
slideUp(); --向上滑出
slideDown(); --向下滑入
完成效果
今天的重头戏是jq的选择器
Jq选择器可以通过不同的选择器可找到相对应的元素
基本选择器
例如id选择器$(“#id”)用一个井号
类选择器用一个$(“.类”)
用法和js差不多就是前面多了一个$();
并列选择器:$(“选择器,选择器,选择器”)
层次选择器
例如后代选择器用一个空格 分开
子元素选择器 用>
下一个元素用 +
兄弟元素用~,
基本过滤选择器
例如first last等可以获得子元素中的第一个或者最后一个
Even odd 奇数和偶数
表单选择器 checkbox
属性选择器 prop()
接着是jq的DOM的操作
append a.append(c) 将c插入到a的内部的后面
appendTo a.appendTo(c) 将a插入到c的内部的后面
数组的遍历
方式1 :
$(数组).each(function(i,n){}); 参数 : i代码索引 ,n代码索引对应的值
方式2 :
$.each(arrs,function(i,n){}) 参数 : i代码索引 ,n代码索引对应的值
作者: 376091692 时间: 2018-5-20 23:02
今天学习了JQuery:
JQuery是一个JS的框架.对传统的JS进行了封装,可以达到写的更少,做的更多
熟知js和jq的转换,;
jq通过show(),hide(),等方法完成广告弹出;
jq的选择器很重要,常用的选择器要记住,特别是基本选择器,用的最多;
设置属性可以用attr()和prop(),用法一样;
jq的DOM操作内部要知道怎么插入和删除一级数组遍历
作者: 林荣彬 时间: 2018-5-20 23:05
林荣彬
今天学习了JQuery的入门,JQuery是一个JS的框架(JS的类库),就是对传统的JS进行封装,在使用Jquery前需要导入Jquery的js的文件 <script src="path"></script> .
JQuery的入口函数方式:相当于页面加载的时间,可以执行多次,效率比window.onload要高,执行的时机不一样,JS等页面加载完后执行,JQ等页面的DOM树绘制完成后进行.
JQ对象不能使用JS的方法和属性 JS对象也不能使用JQ的方法和属性 但二者可以互相转换:
将JS对象转换成JQ对象:$(JS对象)
将JQ转成JS的对象:
第一种方式
$ +对象名[0].innerHTML="将JS的对象转换成JQ对象";
第二种方式:
$+对象名.get(0).innerHTML="将JS的对象转换成JQ对象";
页面加载成功事件:
1. 简便写法 : $(function(){});
2. 复杂写法 : $(document).ready(function(){});
JQ的基本选择器:
id选择器:$("#div_id名")
元素选择器:$("元素名称")
类选择器:$(".类名")
并列选择器$(选择器,选择器,选择器)
JQ的层级选择器:
后代选择器:使用 空格 ?所有后代包含孙子及以下的元素 例如:隔行换色中的例子$("tbody tr:odd").addClass("odd");
子类选择器:使用 > 第一层的元素
下一个选择器:使用 + 下一个同辈元素
兄弟选择器:使用 ~ 后面所有的同辈元素
属性选择器:
1. [属性名]:有指定属性的元素
2. [属性名='值']:有指定属性和值的元素 例如:复选框的全选和全不选例子.$(":checkbox[name='ids']").prop("checked",this.checked)
内部插入:
1. append a.append(c) 将c插入到a的内部的后面
2. appendTo a.appendTo(c) 将a插入到c的内部的后面
JQuery数组的遍历:省市联动事例
遍历的方式一：$.each(objects,function(i,n){});
遍历的方式二:$(“”).each(function(i,n){});
作者: 追风筝的人哇 时间: 2018-5-20 23:22
康元中
今天学习JQuary
jQ 是js的一种工具类是jQuary 能够大大提高开发的速度,使得代码更加简洁,正如jq宗旨 learn more do less
jq 和js 存在着区别
jq和js 不能是用对方的方法属性只能使用各自的方法和属性但是js和jQ可以转换
jq 转成js $("jq对象")[0] 或者$("jq对象").get(0);
js 转成jq $("js的对象");
使用jq就得引入一个js文件 ,记住其引用的方式,在head标签下引用 ;
jq的入口函数格式和js入口函数存在区别
jq入口函数是 $(function(){}) 可以加载多次
js入口函数 window.onload=function(){} 只加载一次
学习一些选择器,目前先掌握一些常用的选择器即可,其他可以混个眼熟,多查Api
基本选择分为 元素选择器; id选择器; 类选择器;通配符选择器和并列选择器
层级选择器: 后代选择器 子元素选择器 下一个元素选择器和兄弟选择器 --后两个区分开来
过滤选择器: odd 奇数; even 偶数
表单选择器 : $(":checkbox") 等等
属性选择器 attribure attribute[属性名=["值"]
学习jq 的一些效果用到一些方法 show(毫秒值)
sliddown()
slidUp()
fadeIn()
fadeOut()
学习jq对dom操作 先掌握 数组的遍历方法 和 对html的曾删改
a.append(c)将c插入到a的内部的后面 可以插入html文件
a.appendTo(c) 将a插入到c的内部的后面
数组遍历方式 :$.each(arrs,function(i,n){}) 参数 : i代码索引 ,n代码索引对应的值
$(数组).each(function(i,n){}); 参数 : i代码索引 ,n代码索引对应的值
删除:
remove():把自己干掉 (自杀)
empty():清空元素 (清空所有的子标签)
用jQuary完成 四个案例分别是 省市联动/隔行换色/复选框的全选和全不选/广告的定时弹出隐藏
作者: Nevermo 时间: 2018-5-20 23:30
许煜
JQuery 总结
JQ就是JavaScript的框架,对js进行了封装,底层还是JavaScript,jq相当于js的类库
Jq的优势:封装之后,使用起来比起js更加简便 高效.相当于冷兵器和火枪
使用之前需要引入jq文件
Jq入口函数$(function( ){ }) 或$(document).ready(function( ){ })
事件函数不装在入口函数里面就不会生效
原因 head先于body加载
其余重点 appen( “这里可以写标签加上代码”)
循环遍历 $(数组).each(function(x,y){ })
$.each(数组.function(x,y){ })
最后我觉得省市联动的案例里面 直接用empty清空子标签,不保留 “请选择” 这个选项比较切合实际.因为保留 请选择 这个选项的话需要表单验证的时候多写一步进行表单数据的有效性进行验证 如果去掉后 就可以省掉这一步h:\p
作者: ...ylq 时间: 2018-5-20 23:39
叶凌青
今天主要学习了jQuery
我的理解就是他就是对js进行了封装,也就是可以通过更少的代码,做和js一样的事,或者更多的事
然后又学了了引入jquery文件的方式
1 , 引入Jquery的js文件
<script src="../../js/jquery-1.11.3.min.js"></script>
语法 $("选择器")
3 , javaScript和jquery区别
简单来说就是jquery对象只能使用jquery的方法和属性
javaScript对象只能使用javaScript的属性和方法
(但是他们可以互转)
JS->JQ
简便写法 : $(JS对象)
JQ->JS
第一种方式 : JQ对象[index]
然后还学习了js中的事件,知识比javaScript少了on
页面加载成功事件 简便写法 : $(function(){});
注意事项 : 要保证页面加载成功后,才能使用jq的事件
jquery对象.事件名称(function(){});
还学了jquery的效果
jquery的选择器
基本选择器
层级选择器
属性选择器
比较重要
还学习了jq的css
JQuery对属性的操作
以及jQuery的DOM操作
作者: 黄兴磊 时间: 2018-5-20 23:45
JQ就是JS的类库,对其进行了封装,使代码简洁了很多,但也是第一天学,都是对JS的代码进行封装,有点绕,两者的转换是 js转JQ $(JS对象) , JQ转JS的方式有两种第一种方式 : JQ对象[index] 后面索引加个零, 第二种方式: JQ对象.get(index) 后面索引加个零
然后又学习了事件 两者的区别是JS加了ON JQ没有On 还有JQ选择器常用的有三种,分别是,层级选择器,基本选择器,属性选择器.
作者: it小白001 时间: 2018-5-20 23:46
jQuery的宗旨是 : write less, do more. (写的更少,做的更多)
Jq使用的时候要引入js文件 , 注意js对象和jq对象的方法不能互用.js转jq对象:
$(js对象) jq转js对象: jq对象[0]和jq对象.get(0)
写事件的时候要注意要等页面加载完再使用
Jq一些常用的方法:
display的显示方法:
普遍显示:show() 括号里可以不写,也可以写”show”(慢),”norma(一般)”,”fast”(快),还可以写一个毫秒值表示多久显示
hide(); 隐藏的方法
slideDown(); --向下滑入
slideUp(); --向上滑出
fadeIn(); --淡入
fadeOut(); --淡出
toggle(); --切换函数
使用差不多.
基本选择器: id选择器 $(“#id名”) 类名选择器 $(“.类名”) 元素选择器$(“元素名”) 通配符$(“*”) 获得boby里所有元素 并列选择器$(“选择器,选择器,选择器”)
层级选择器
a b:选择a下面所有的b
a>b:选择a下面的叫b的孩子(不包含孙子辈)
a+b:选择a下面叫b大弟弟(不包含大哥)
a~b:选择a下面所有叫b弟弟(不包含大哥)
[属性名]:有指定属性的元素
[属性名='值']:有指定属性和值的元素
Jq对属性的操作
使用att()可以获取元素属性,还可以添加属性
Jq的jQuery的DOM操作
内部插入:
append a.append(c) 将c插入到a的内部的后面
appendTo a.appendTo(c) 将a插入到c的内部的后面
外部插入:
after a.after(c) 在a的后面插入c
before a.before(c) 在a的前面插入c
insertAfter a.insertAfter(c) 将a插入到c的后面
insertBefore a.insertBefore(c) 将a插入到c的前面
删除:
empty():清空元素 (清空所有的子标签)
remove():把自己干掉 (自杀)
数组的遍历
方式1 :
$(数组).each(function(i,n){}); 参数 : i代码索引 ,n代码索引对应的值
方式2 :
$.each(arrs,function(i,n){}) 参数 : i代码索引 ,n代码索引对应的值
对应案例 : 二级连动
作者: hpb199567 时间: 2018-5-20 23:47
何平波
今天学习了高大上的JQuery,觉得JQ是一种很方便的类库(JS的框架)
1.JQ(JQuery)是JS一个类库,将JScript的方法进行封装,使JS的函数使用起来更加的灵活和方便(写的更少,做得更多).
优点:JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高
2.JQ的入门
(1)引入js文件<script scr="xxxx.js"></scrpt> (注意:由于JQuerys是一个类库,每个Html文件都需要调用.js的文件,独立的一行)
(2)$符号相当于JQ的对象 $(function(){函数});($==JQuery)
(3)JQ的方式:相当于页面加载的事件,可以执行多次,效率比JS高
(4)Windows.onload等页面加载后执行函数方法
(5)$(function(){
$("#id")---相当于document.getElementById("id");
//JQ第一种转成JS对象
$接收变量名[0].innerHtml="内容"
//JQ第二种转成JS对象
$接收变量名.get[0].innerHTML="内容"
});
JS对象转成JQ对象
直接加$(js对象)
注意:JQ事件没有ON
为什么说JQ的功能强大呢?因为依赖的是JQ的选择器!
JQ的选择器
层级选择器 基本选择器
1.后代选择器:调用空格 1.id选择器 调用格式:$("#id") 2.子元素选择器:调用 > 2.类选择器 调用格式:$(".类名")
3.下一个元素:调用+ 3.元素选择器 调用格式:$("元素名称"
4.兄弟选择器:调用~ 4.通配符选择器 调用格式:$("*")
5.并列选择器 调用格式:$("选择器,选择器,选择器")
基本过滤选择器 内容选择器 属性选择器 表单选择器 1.first首个元素
2.last最后一个元素
3.odd元素为奇数
4.even元素为偶数
...可查阅JQ帮助文档
注意:所有的选择器都要在动态绑定里执行
如jq基本选择器 这个代码是点击指定按钮改变按钮颜色,以上方法可以参考文档按如下代码格式调用选择器
$(function){
$("#id").click(funcation(){
$("#id").css("background","red")
});
}
今天需要掌握4个案例,做到4个案例能独立敲写并理解,以下是自己对案例的一些理解
第一个案例是使用JQuery完成页面定时弹出广告
1.引入JQuery文件
2.调用JQuery函数方法基本格式
3.JQuery的基本格式$(function),因为本案例的效果是让广告显现一次并消失,所以直接采用函数方法setTimeout(函数方法只在指定的期间出现以一次)
4.因为主方法里调用了显现方法,所以要编写好显现方法的一个显现效果和时间(这里JQuery里有许多的效果,可查阅文档)
5.显现方法里可以嵌套一个效果消失的方法,这样可以是代码编写更加简便,设定好消失效果和时间
6.消失方法由于被调用,所以只需设定好定义的效果和时间就可以,这样一个美观简洁的页面就被设定好了.
第二个案例使用JQuery完成表格隔行换色的案例
1.设定好一个表格
2.调用JQuery函数方法基本格式
3这里就可以使用基本过滤选择器里的奇数odd和偶数even,要注意一个的是格式,由于表格换色从行(tr)换,正确的格式$(tr:odd)和$(tr:even)
4因为改变的是样式,所以这里是css的一个属性的改变 css("","")第一个可以填属性,第二个填值, 这样一个简便的表格换色就可以出现在网页上了
第三个案例是使用JQuery完成复选框的全选和全不选
1.这里先要把最外层的的分类栏设定好一个id
2.次分类栏也设定好id
3.获取最外栏的id,选择点击事件
4.一点击就会发生复选框的操作,所以要在点击事件里再起一个函数function
5.选择复选框的属性选择器并且拿到次选择栏的id值,添加默认选择,意思是最外层的复选框被点击,次复选框也会被跟着默认选择
第四个案例是使用JQuery完成省市二级联动
1.先设定好两个下拉列表,第一个列表是省,第二个列表是市 ,分别给两个下拉列表赋值id
2.引入JQ
3.JQ的函数调用
4.定义省对应的市元素,采用二维数组
5.拿到市的id,定义一个接收变量名
6.获得代表省份的下拉列表.事件是JQ里的改变事件,在改变事件里再调用JQ的函数方法
7.改变事件里的函数方法里要规定好市的元素长度是1,防止市的元素长度累加
8.接收省的value值,拿来做判断
9.遍历方法取得省的元素,采用$.each(省的元素内容,函数方法(i,n)) i:代表省元素的个数 ,n:代表省元素的内容
10.判断:如果市数组的值等于省的value值
11.那么再遍历市的元素,同样采用$.each(市的元素内容,函数方法(j,m)) i:代表市元素的个数 ,m:代表市元素的内容)
12.如果条件成立了,那么元素就添加到市的下拉列表里
作者: 李成林 时间: 2018-5-20 23:48
李成林
jQuery的总结
jQuery就是在jscript基础上的框架方便我们的使用,用少的代码实现多的功能;
jQ和js的函数不能通用,想要通用要装换类型;
jq转js:
$[0]
js转jq:
$(js对象)
事件的触发格式,对比js触发事件是不需要写on;
书写格式:$(id).click(function(){});
jq的选择器
1.基本选择器:$("#id"),$(".class"),$("元素"),$("id,.clss,元素");
2.层级选择器:$("a b"):子孙选择器,$("a+b"):a的下面一个同级元素,同桌选择器
$("a>b"):儿子选择器,$("a~ b"):a下面所有的同级元素b元素,兄弟选
择器
3.属性选择器:$("div[id]"):选择有id属性的div元素 $("div id[cc]")选择id属性为
cc的div元素.
css的设置
jq对象.css(jq的样式属性,值):css只可以对style中的属性进行修改;
attr的设置
于css不同的是attr不能设置样式属性,只能设置标签中的属性
设置属性 jq对象.attr(jq的元素属性 ,值)
获取属性 var v =jq对象.attr("jq的元素属性");
移除属性 jq对象.removeAttr("属性名")
jq的DOM(文档)操作:
jq对象.append(c);
jq对象.appendto(c):将jq对象添加到c里面
删除
empty();清空子元素
元素.remove():连元素一起干掉
数组便利:
1.$(数组).each(function(i,n){}):i元素索引,n元素
2.$.each(数组,function(i,n));
作者: sts 时间: 2018-5-20 23:48
苏海斌
JQ是轻量级的JS的类库,对JS进行封装;JQuery的宗旨是写的更少,做的更多(write less,do more)
JQ在使用时要引入JS文件,常用语法为:$("选择器")
页面加载是个重点,通常用简便写法$(function(){})
JQ中选择器有很多,例如:基本选择器,层级选择器,属性选择器,基本过滤和内容过滤.其中前三个最为重要,而较为难理解的是层级选择器
a b:
a>b:
a+b:
a~b:
通过JQ可以更简便的完成HTML代码
作者: 光宇 时间: 2018-5-20 23:52
侯玉林
万物皆对象,无物不对象.jq本质就是一个js的类库,专业术语叫框架.
一般情况,为了实现某个js的功能模块,我们可能要绞尽脑汁,费尽千辛万苦,
才学出这个模块,但jq大大简化了这个过程,因为其将过程封装,你只需要知道该功能如何去调用
,该功能具有什么作用.而不用去关心过程,
this is jq,write the less ,do the more.
作者: 李思贤126 时间: 2018-5-20 23:54
李思贤:JQ就是对JS进行封装.让你write less,do more.
JQ的使用:1首先要引入Jquery的js文件…
2 语法:选择器.主要的几个选择器是
2.1基本选择器{1id选择器:$(“#id”);2类选择器$(“.类名”);3元素选择器$(“元素名称”);4通配符选择器$(“*”);5 并列选择器$(“选择器,选择器,选择器”)}
2.2层级选择器{1 a b:选择a下面所有的b;2a>b:选择a下面的儿子b,不含孙子;
3a+b:选择a下面第一个b(同级);4a~b:选择a下面所有b(同级)}
2.3属性选择器{1[属性名]:有属性的元素;2[属性名=’值’]:有属性和值得元素}
JS和JQ不能调用对方的方法属性;但可以转换之后调用;
JS->JQ $(JS)
JQ->JS JQ[0]或JQ.get(0)
JS中onload=”…”在JQ中$(function(){})或者$(document).ready(function(){})
两者区别:onload在页面加载完用, $(function(){})在DOM树完成后就执行,且
onload只能加载一次,后者可以多次使用.
几个显示效果show(),hide(),slideDown(),slideUp(),fadeIn(),fadeout()
()中可放slow,normal,fast,毫秒值…..显示效果比JS里面的好很多,且特效很多.
JQ中的CSS:可以设置属性 JQ.css(“属性”,”值”)
添加样式:JQ.addClass(“引入的对象”)
删除样式:JQ.removeClass(“删除样式”)
attr()和prop()用来设置或者获取元素的属性.
JQ对DOM的操作,主要几个:append插入到..后面;
appendTO 插入到..内部后面;
Empty();清空子标签
数组遍历:$(数组).each(function(I,n){})
$.each(数组,function(I,n){})
全选案例: $(function() {
$("#seleclAll").click(function() {
$(":checkbox[name='ids']").prop("checked", this.checked);
})
}) 要注意:和checkbox和[]中间不能有空格!!!
省市联动:注意每次change的时候要把city中值清空$city[0].options.length = 1;
作者: 郑学馨 时间: 2018-5-21 00:07
郑学馨
企业开发常用框架:
jq,extjs,dwr,prototype
jq的加载与onload有什么区别?
jq的$(function(){}):是指文档结构加载完成,而图片等非文档
并未加载进内存.
onload是所有的文件都已加载完毕,包括图片等;
js与jq之间的转换方式?
js转jq:$(js);
jq转js:jq[0]和jq.get(0);
js与jq的区别?
两者方法不能混用.jq是js的一个类库,框架,jq里面封装了很多
js的功能,能用更少的代码实现更强大的功能;
案例:设置图片的隐藏和显示:1:注意点,控制图片的显示属性
display是放置在style这个标签中的;2:图片的显示动画有很多
种,例如.slidedown/up(毫秒值):滑入和滑出
选择器:
基本选择器:id,.class,元素,"*"(通配符),并列(选择器,选择器
)
层级选择器:" ":后代选择器,>:子代选择器,+:兄弟选择器(大弟
),~:兄弟选择器(所有弟弟)
属性选择器:属性名;属性名=值
选择器很重要!
方法:1:添加:append():什么都已添加;
2:删除:empty();清空里面的元素
3:遍历:$.each():与增强for类似;
作者: cxming 时间: 2018-5-21 00:14
陈旭明
JQ是JS的一个类库，对JS进行封装，能够用更少的代码做更多的事
JQ主要是依靠各种选择器来提高效率，所以选择器是JQ的核心
JQ的选择器主要有基本选择器，层级选择器，属性选择器等
今天用JQ重新做了上次课程做的四个案例，可以用更少的代码量实现同样的效果
案例1：广告的显示与隐藏
注意先在style样式里面设置好display为none（不显示），后续的思路跟用js做的时候差不多
案例2：隔行换色
记得引入css文件，然后通过addClass来进行调用
案例3：全选全不选
需要用到JQ的属性选择器选择name为ids的复选框，还有JQ里DOM的添加方法prop
案例4：省市联动
获得各省的value值：val val = this.value; 遍历数组：$.each(arrs,function(i,n){}) 参数 : i代码索引 ,n代码索引对应的值
作者: zzx835387607 时间: 2018-5-21 00:51
Day05(郑志祥)
1.今天学习了j quary是之前学习j scripe有点区别,j quare是j scripe的类库(框架) 两者获取的对象,方法与属性不能混着用,如果强制要用,只能进行相互转换
2.JS转换为JQ 一种方式 1.$(JS对象)
JQ转换为JS 两种方式1.JQ[index] 2.JQget.[index]
3. 页面加载事件,之前j scripe 是window.onload 而j quary是$(funtion(){})
4. Js的一些广告效果的方法 show-hide(出现-隐藏) slideDown-slideUp (滑入-滑出)
FadeIn-fadeOut(淡入-淡出) toggle (fn1 ,fn2 ....) 单击切换执行 背景颜色的切换
(利用j quare)省市联动的实现
解题思路
1. // 定义数组一个二维度数组,概念：一个数组中的元素又是一个数组
2. // 获得代表省份的下拉列表:
//让第二个列表的长度为1,只能剩(--请选择--)
$city.get(0).options.length = 1;
3. // 遍历二维数组cities获得索引i (i是索引 ,n是索引相对应的值) 仍然是一个一维数组与省份的val进行匹配
4. //继续遍历一维数组得到里面的城市m
5.//将遍历后的城市m 一个个的添加到第二个列表中
$city.append("<option>"+m+"</option>");
案例二(按钮切换背景颜色)
$(function(){
//引用 Jq对象.toggle(fn1,fn2...); 单击切换fn1 fn2.......
$("#btid").toggle(
function(){
//.css为 设置(属性 属性值)
$("body").css("background-color","red");
},
function(){
$("body").css("background-color","black");
},
<body>
//添加一个按钮
<input type="button" value="调节背景颜色的按钮" id="btid">
</body>
作者: 望蜀 时间: 2018-5-21 01:11
本帖最后由 望蜀 于 2018-5-21 08:34 编辑
邵倩
JQuery是JS的一个框架(类库),对传统JS进行了封装,企业开发中往往不使用传统JS,而使用JS框架 如JQ,ExtJS,DWR,Prototype
JQ的宗旨write less,do more
$(function(){ })相当于window.onload=function(){ },前者可以执行多次,而window.onload只能有一个,前者效率也比较高,因为它是等页面DOM树绘制完成就开始执行,而JS要等页面加载完毕才执行
使用JQ前要先引入JQ的JS文件<script src=" "></script>
JQ和JS分别都只能调用自己的函数,所以需要掌握两者对象的互相转换
JQ对象转成JS对象: JQ对象[0]
JS对象转成JQ对象: $(JS对象) 类似于Java中的强转
JQ中的事件相当于JS的事件去掉前面的on
JQ中部分显示效果的函数:
show(); hide(); slideDown(); slideUp(); fadeIn(); fadeOut();
animate();动画 toggle();切换--1.9之后就没有这个功能了
需要掌握的4个案例:
JQ实现定时弹出广告和其他特效
JQ实现表格的隔行换色
JQ实现复选框的全选和全不选
JQ实现省市二级联动
JQ优于JS主要是依赖于它的选择器
(最常用)基本选择器:id,类,元素,通配符 $("*")找到页面所有元素,并列 $("选择器,选择器,选择器 ")
层级选择器
属性选择器
内容选择器
attr()可以设置或获取元素属性 JQ对象.removeAttr("属性名")删除属性
数组的遍历 $(数组).each(function(索引,索引对应的值){ })
作者: 丶犯二 时间: 2018-5-21 01:11
任佳锋
今天学习了JQuery,改进了原本的案例,让原本臃肿不堪的页面简洁多了
也算是间接说明了JQ的宗旨--用更少的代码,做更多的事
JQ呢,是对JS进行封装的一个类库
使用JQ的首要前提是导入JQ的js文件
通过 <script src="js文件所在路径"></script>导入
并且JQ与JS的对象无法互相访问,但可以互相转换
JQ对象→JS对象 方法有两种
$JQ对象[0]
$JQ对象.get(0)
JS对象→JQ对象
$(JS对象)
JQ的使用语法为$(""选择器")
而选择器又分为
基本选择器:
id选择器 $(“#id”)
类选择器 $(“.类名”)
元素选择器 $(“元素名称”)
通配符选择器 $(“*”)
*:页面当中的所有元素
并列选择器 $(“选择器,选择器,选择器,...”)
这之后还有层级选择器.后代选择器.基本过滤选择器.属性选择器.表单选择器...等等
(虽然有万能的API,不过不太会使用这玩意= =)
学习之后,通过选择器的搭配使用可以很方便快速的对元素进行一些操作
后面还学习了JQ的数组两种便利方法
1. $(arr).each(function(i,n){})
2. $.each(arr,function(i,n){})
作者: 郁闷客 时间: 2018-5-21 01:35
林树德
今天学习了JQuery,JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.在操作过程中首先要引入Jquery的js文件.如何把js转换为jq对象,jq转换为js;JQ选择器的一些用法;
作者: 黄志彬 时间: 2018-5-21 01:35
JQuery 是JS的类库，是一个轻量级的脚本只有几十K
传统的JS方式，页面加载只能执行一次。
window.onload 等页面加载完之后才会执行
JQ转成JS对象
$d1[0].innnerHtml="将JQ转成JS对象"；
$d1.get(0).innnerHtml="将JQ转成JS对象"；
JS对象转成JQ对象
$(JS对象)；
jq的选择器：基础选择器，层级选择器，属性选择器，基础过滤和内容过滤
jq对属性的操作建议先使用attr()来设置或获取元素属性，不行再用prop
jq的数组遍历
$(数组).each(function(i,n){});
$.each(arrs,function(i,n){})
作者: wpwing 时间: 2018-5-21 01:42
吴鹏
总结
----------------------------------------------------------------
JQuery是一个经过封装后的轻量级的js类库,提供很多功能,理念是"write less,do more",
有配套的api,每次版本更新后都会有功能的增删,所以对应版本的jq库要查对应版本的api;
使用方式:$("选择器")或者jQuery("选择器"),在使用之前要在<head></head>里引入jq库,
方式是<script src="jq库的地址"></script>;
注意:通过js调用的对象和通过jq调用的对象的属性和方法不能互相使用,但是两者可以转换,
方式是:
js对象转换成jq对象为,$(js对象),$符号为jQuery的简单表示方式,所以可以看成是jQuery(js对象);
jq对象转换成js对象为,jq对象[index],或者jq对象.get(index);
------------------------------------------------------------
要使用jq的函数必须等页面的内容加载完,所以在<head></head>里面必须先有个声明
$(document).ready(function(){
要执行的函数;
});
可简化为:
$(function(){
要执行的函数;
});
-----------------------------------------------------------
jq的一些方法:
jq对象.show():显示一个jq对象;
括号里面可传入毫秒值或"slow","normal","fast"(实现速度从慢到快);或者是show(毫秒值,function(){});
jq对象.hide():隐藏一个jq对象;
jq对象.fadeIn():淡入一个jq对象(由浅到深显示);
jq对象.fadeOut():淡出一个jq对象(由深到浅消失);
jq对象.slideDown():jq对象向下滑动;
jq对象.slideUp():jq对象向上滑动;
例子:
<head>
<script src="jq库所在地址"></script>
//引入jq库;
$(function() {
$("p").click(function(){
//当点击jq对象p时,执行函数function();
$("p").show(1000);
//function()函数执行的内容是将p元素的内容显示出来,此方法使用的选择器是元素选择器;
});
});
//声明待页面加载完成后再调用function()函数;
</head>
<body>
<p style="display:none;">点击此文字后隐藏</p>
//将p的样式定义为隐藏;
</body>
1.9版本以后删除的方法jq对象.toggle(fn1,fn2,...);执行toggle()函数时,第一次执行fn1,第二次执行fn2,...
-------------------------------------------------------------------------------
jQ的选择器:
一 基本选择器:元素选择器,类选择器,id选择器,通配符选择器,并列选择器;
1 元素选择器调用方式:$("元素名称"),调用与括号里面元素名称相同的元素;
2 类选择器调用方式:$(".类名"),调用与括号里面类名相同的元素;
3 id选择器调用方式:$("#id值"),调用与括号里面id值相同的元素;
4 通配符选择器调用方式:$("*"),此调用方式甚至会包括<body>标签;
5 并列选择器调用方式:$("选择器1","选择器2","选择器3"),形如:$("#abc",".aaa","div"),
可以将id值为abc,类名为aaa,元素名为div的元素并列调用;
二 层级选择器:a b,a>b,a+b,a~b;
1 a b(后代选择器),会将所有在a标签里的次级b标签和次次级b标签选择(假如有的话),包括同级的其它a标签下的次级b标签和次次级b标签(假如有的话);
2 a>b(子类选择器),会将a标签里的次级标签下为b的标签选择,此选择器不会将次次级选择器选中,因此称为子类选择器;
3 a+b(兄弟选择器),会将紧接着a元素后面的b元素选择,不包含子孙元素;
4 a~b(兄弟会选择器),会将a后面的所有b元素选择,ab元素为同级元素,不包含子孙元素;
三 属性选择器:$("属性"),$("[属性='属性值']");
1 $("属性") :选择含有指定属性的元素,例如$("name")会将页面body中含有name属性的元素选择;
2 $("[属性='属性值']") :选择含有指定属性和属性值的元素,例如$("[name='abc']")只会将元素中含有name属性且属性值为abc的元素选择;
四 过滤选择器: :first,:last,:even,:odd,:gt(index),lt(index);
1 :first ,会将body中索引值为0的元素选择出来,比如页面中有5个同级且父级为body的<div>,调用$(div:first)时,会将第一个div选择,特别的是,如果
在括号里面填写如$(div div:first),则会将div子级中的第一个div选择;
2 :last ,将索引值为最后的元素选择,例子见上面;
3 :even ,将索引值为偶数的元素选择;
4 :odd ,将索引值为奇数的元素选择;
5 :gt(index) ,将索引值大于index的元素选择;
6 :lt(index) ,将索引值小于index的元素选择;
特别注意:上面所说的索引值为同级(树状)的相同元素的从上到下,数值从0开始排序,使用even和odd时,要特别注意索引值和我们实际想要操作的元素的序号;
-------------------------------------------------------------------
在jq对象中使用css:
一 设置css样式
jq对象.css("属性","属性值");
jq对象.css({"属性":"属性值","属性1":"属性值1"});
二 添加css样式,需先引入对应的css
jq对象.addClass("引入的css名");
三删除css样式
jq对象.removeClass("对应的css名");
-------------------------------------------------------------------
jq对属性和DOM操作的方法(下面直接列出):
jq对象.attr("属性名","值")
jq对象.attr({"属性":"值","属性1":"值"});
jq对象.attr("属性名")
jq对象.removeAttr("属性名");
prop:
a.append(c)
appendTo(c)
a.empty()
a.after(c)
a.before(c)
a.insertAfter(c)
a.insertBefore(c)
a.remove()
$(数值).each(function(i,n) {})
$.each(数组,function(i,n) {})
--------------------------------------------------------------------
一 确定触发事件
二 确定触发事件时要执行的函数
三 获取执行函数时要进行操作的对象
四 对对象进行各种操作
--------------------------------------------------------------------
jq实现广告的显示与隐藏
分析:当页面加载后,开始计时,经过一段时间后,图片显示,再经过一段时间后,图片隐藏;
计时使用的方法为js库的setTimeOut(),显示和隐藏使用的是jq库的show()和hide();
实现代码(引入jq库等操作会忽略掉,只写方法体):
$(document).ready.(function() {
//声明当页面加载完成后再执行jq对象的函数;
setTimeout("showAd()",3000);
setTimeout()方法,作用是在3秒后执行一次showAd()方法;
});
function showAd() {
$("#adDiv").fadeIn(2000);
setTimeout("hideAd()",5000);
}
//此方法为id值为adDiv的元素在2秒内淡入,且在5秒后执行hideAd()方法;
function hideAd() {
$("#adDiv").fadeOut(2000);
}
//此方法为同个元素在2秒内淡出页面;
<body>
<div id="adDiv" style="width:100%;display:none;">
<img src="广告图片地址" />
<div>
</body>
此代码实现了当页面加载后经过3秒的事件,图片在2秒的时间里淡入页面最顶端;
当经过5秒后,图片在2秒内淡出页面;
--------------------------------------------------------------------
jq实现表格的隔行换色
分析:在js中,我们是通过遍历tab集合的行集合,判断索引值是否能被2整除,区分出奇数和偶数行,
分别设置颜色;在jq中,可以直接通过选择器的组合来过滤出表格体的奇数和偶数行,然后设置颜色;
代码实现:
首先,给定条件,要进行颜色隔行换色的表格体是标签<tbody></tbody>的子级,行的标签是<tr></tr>,
jq库已经引入,
$(function() {
$("tbody tr:odd").css("background","blue");
//选择器为后代选择器和过滤选择器的组合,过滤出所有索引值为偶数的行,用css样式设置背景颜色为蓝色;
$("tbody tr:even").css("background","red");
//同理,选出索引值为奇数的所有的行,设置成红色;
});
注意:索引值和实际表现的行序号有时并不一致,因本题是在tbody下进行过滤,因此索引值的奇偶性和行的奇偶性就一直;
--------------------------------------------------------------------
jq实现复选框的全选和全不选
分析:使用jq库中表单里的:checkbox过滤出除标题复选框之外的所有的复选框()可以通过增加属性选择器如name来排除标题),
然后将此所有的复选框设置成跟标题的复选框一样的值;本题中,根据所用的jq库的版本不同,需要分别用attr或prop来进行属性的设置;
代码实现:
假设,所有的复选框都有input="checkbox"属性,标题复选框的id值为"selectAll",其余复选框的name值为"ids",
$(function() {
$("#selectAll").click.(function() {
//id值为selectAll的元素在点击之后执行下面的方法;
$(":checkbox[name='ids']").prop("checked",this.checked);
//过滤出所有属性值有checkbox的元素,在这些元素中找出有name属性且值为ids的元素,
//将其checked值设置成与id为selectAll的元素相同的值;
});
});
以上代码实现了,当点击标题复选框时,将标题复选框的值赋值给其余之外的复选框,实现复选框的全选全不选;
本题中如果jq版本使用1.6以上的,需用prop进行属性值的设置,否则可以使用attr进行属性值的设置;
--------------------------------------------------------------------
jq实现省市联动
分析:<select>创建省的元素后,对每个省分别设置不同的value值,从0开始,这样可以与后面的数组的索引值结合使用;
创建一个二维数组,高维的每个元素的索引值就和每个省份的value值对应,因此,可以在每个元素(每个元素都是一个一维数组)
里面存放对应省份(根据value值)的城市;然后使用jq库中的change方法,在下拉菜单中单击任意一个省份后都会执行一个函数,
这个函数可以使用jq库中针对数组的一个方法即$.each(数组,function(i,n){ }),对于传入的数组,定义一个函数进行操作,其中
i为数组中的每一个元素索引,n为该索引的具体的内容;
代码实现:
$(function(){
var cities = [
["杭州市","绍兴市","温州市","义乌市","嘉兴市"],
["南京市","苏州市","扬州市","无锡市"],
["武汉市","襄阳市","荆州市","宜昌市","恩施"],
["石家庄市","唐山市","保定市","邢台市","廊坊市"],
["长春市","吉林市","四平市","延边市"]
];
//创建二维数组,定义每个省份具体的城市值,根据省份的value值确定省份的索引值;
var $city = $("#city");
//将jq对象赋值给变量city,在下面中将jq对象转换成js对象,调用js的方法,对city进行初始化;
$("#province").change(function(){
//change方法,当下拉内容改变时,调用下面的函数;
$city.get(0).options.length = 1;
//将city的值清空;
var val = this.value;
//获得省份的value值,赋值给val变量;
$.each(cities,function(i,n){
//调用each方法,传入二维数组,
if(i == val){
//判断索引值与省份的值是否相等,目的是将省份与二维数组对应起来;
$(n).each(function(j,m){
//当上面相等时,既可以遍历相应的存放城市的元素数组;
$city.append("<option>"+m+"</option>");
使用jq库的append方法,将具体的城市的值写入city中;
});
}
});
});
});
作者: AsusCoder 时间: 2018-5-21 02:51
姓名:曾耀峰
今天的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>项
作者: 柯建程 时间: 2018-5-21 08:24
柯建程
每天都很热,到了晚上也很热,角落没有凉气啊
JQ一种框架
传统的JS页面加载只能执行一次
window.onload等页面加载完后执行方法
JQ等页面的DOM树绘制完后开始执行
JQ页面加载(可以加载多次,效率比JS高)
$(function(){})
宗旨是写的少做得多
JQ效果 (应用于广告的出现了消失)
show显示
show()
show("slow") normal, fast
show(毫秒)
hide()隐藏
slideDown()向下滑动
slideUp()向上滑动
fadeIn淡入
fadeOut淡出
JQ的各种选择器
了解更多选择器,代码就越少
id选择器
$("#id")
类选择器
$(".类名")
元素选择器
$("元素名称")
通配符选择器
$("*")
并列选择器
$("选择器1,选择器2")
后代选择器
空格隔开
子代选择器
>隔开
下一个同辈的
+
所有同辈的
先页面加载才能点击加载
$(function(){
$("#id').clide(fuction(){
})
})
$==JQuery
基本过滤
:first
:last
:odd奇数
"even偶数
:eq(index)找第几个
~常用方法:
append()在某个元素添加内容
appendTo()在某个元素
html()覆盖
JQuera的遍历
作者: Do1 时间: 2018-5-21 08:40
郑泽珑
总结：
jQuery宗旨：write less,do more(写的更少，做的更多);
使用jQuery步骤，导入jQuery的js文件，哪个页面需要用到js使用<script src导入></script>，如果没有引入将会导致jQuery无法执行
$("选择器")
JavaScript和jquery的区别，js对象不能使用jq的属性和函数，要想使用对方里面的东西需要进行转换，JS转JQ：$(JS对象)
JQ转JS：JQ对象[index]
jq动作事件将前面的on直接去掉就可以使用
页面加载事件有2种写法一种是$(fuction{}); 一种是$(document).ready(fuction(){});页面加载成功后才能使用jq对象
JQ里面的选择器大体和JS相同，不同的是JQ的层级可以配合基本过滤选择器使用如：
$("#a tr:odd")表示的是元素A下面的tr元素其中的基数
JQ有多种显示效果一种是直接显示show();一种是淡入淡出滑入滑出
使用JQ设置CSS样式有2种方法，一种是元素后面.css("属性","值")加入多种属性.css({"属性":"值"，"属性":"值"})
使用jq设置并获取属性值的方法是：$("#ab").attr("属性名")，移除属性.removerAttr("属性名")，设置属性值attr.("属性名"，"值");;
使用JQ插入元素的操作是append,appendTo,清空及删除是empty(),remover()
数组遍历的2种方式：
$(数组).each(function(i,n){}); 参数 : i代码索引 ,n代码索引对应的值
$.each(arrs,function(i,n){}) 参数 : i代码索引 ,n代码索引对应的值
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |