jQuery复习
- DOM基本过滤选择器
- jQuery执行操作 $(执行部分)----客户端
css 进行操作
，是同等级进行统一设置 eg：div,span,p{}
. 是下属(和调用方法差不多) eg:div.mini - jQuery 是javaScript中的一个优秀的库
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
})
- jQuery基本选择器
1.选择 id 为 one 的元素
$("btn1").click(function){
$("#one").css("background-color","#bbffaa");
}
2.选择 class 为 mini 的所有元素 $(".mini").css("background-color","#bbffaa");
3.选择 元素名是 div 的所有元素 $("div").css("background-color","#bbffaa");
4.选择所有的元素 $("*").css("background-color","#bbffaa");
5.选择所有的 span 元素和id为two的元素 $("span,#two").css("background-color","#bbffaa");
- jQuery层级选择器
1.选择 body 内的所有 div 元素 $("body div").css("background-color","#bbffaa");
2.在 body 内, 选择div子元素 $("body>div").css("background-color","#bbffaa");
3.选择 id 为 one 的下一个 div 元素 $("#one+div").css("background-color","#bbffaa");
4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("two~div").css("background-color","#bbffaa");
- jQuery基本的过滤选择器
1.选择第一个 div 元素 $("div:first").css("background-color","#bbffaa");
2.选择最后一个 div 元素 $("div:last").css("background-color","#bbffaa");
3.选择class不为 one 的所有 div 元素 $("div:not(.one)").css("background-color","#bbffaa");
4.选择索引值为偶数的 div 元素 $("div:even").css("background-color","#bbffaa");
5.选择索引值为奇数的 div 元素 $("div:odd").css("background-color","#bbffaa");
6.选择索引值为大于 3 的 div 元素 $("div:gt(3)").css("background-color","#bbffaa");
7.选择索引值为等于 3 的 div 元素 $("div:eq(3)").css("background-color","#bbffaa");
8.选择索引值为小于 3 的 div 元素 $("div:lt(3)").css("background-color","#bbffaa");
9.选择所有的标题元素 $(":header").css("background-color","#bbffaa");
10.选择当前正在执行动画的所有元素 $(":animated").css("background-color","#bbffaa");
11.选择没有执行动画的最后一个div $("div:not(:animated):last").css("background-color","#bbffaa");
- 内容过滤选择器
1.选择 含有文本 'di' 的 div 元素 $("div:contains(di)").css("background-color","#bbffaa");
2.选择不包含子元素(或者文本元素) 的 div 空元素 $("div:empty").css("background-color","#bbffaa");
3.选择含有 class 为 mini 元素的 div 元素 $("div:has(.mini)").css("background-color","#bbffaa");
4.选择含有子元素(或者文本元素)的div元素 $("div:parent").css("background-color","#bbffaa");
- 可见性过滤器
1.选取所有可见的 div 元素 $().css("background", "#bbffaa");
2.选择所有不可见的 div 元素 不可见：display属性设置为none，或visible设置为hidden
$().show("slow").css("background", "#bbffaa");
3.选择所有不可见的 input 元素alert($().attr("value"));
- 属性过滤器
1.选取含有 属性title 的div元素 $("div[title]").css("background", "#bbffaa");
2.选取 属性title值等于'test'的div元素 $("div[title='test']").css("background", "#bbffaa");
3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)$("div[title!='test']").css("background", "#bbffaa");
4.选取 属性title值 以'te'开始 的div元素$("div[title^='te']").css("background", "#bbffaa");
5.选取 属性title值 以'est'结束 的div元素$("div[title$='est']").css("background", "#bbffaa");
6.选取 属性title值 含有'es'的div元素$("div[title*='es']").css("background", "#bbffaa");
7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素$("div[id][title*='es']").css("background", "#bbffaa");
8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$("div[title][title!='test']").css("background", "#bbffaa");
- 表单对象属性过滤选择器
val() 方法可以操作表单项中的属性值，不可用input操作
1.对表单内 可用input 赋值操作 $(":text:enabled").val("New Value")
2.对表单内 不可用input 赋值操作 $(":text:disable").val("New Value Too")
3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数 alter($(":checkbox:checked").size())
4.获取多选框，每个选中的value值
var $else=$(":checkbox:checked");
$else.each(function(){
alter(this.value);
})
5.获取下拉框选中的内容
//这个选择器特殊，因为select中被选中的option才是需要的东西
//所以 selected选择器是和 select[name='test']属性选择器一样
var $options=$("select option:selected");
$(options.each(function(){
alter(this.innerHTML);
})
- 元素筛选方法
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])
//(1)eq() 选择索引值为等于 3 的 div 元素
$("div").eq(3).css("background-color","#bfa");
//(2)first()选择第一个 div 元素
$("div").first().css("background-color","#bfa");
//(3)last()选择最后一个 div 元素
$("div").last().css("background-color","#bfa");
//(4)filter()在div中选择索引为偶数的
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
alert( $("#one").is(":empty") )
//(6)has()选择div中包含.mini的
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
//(7)not()选择div中class不为one的
//not(selector) 选择不是selector的元素
$("div").not('.one').css("background-color","#bfa");
//(8)children()在body中选择所有class为one的div子元素
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
//(9)find()在body中选择所有class为mini的div元素
//find() 选出所有的后代元素
$("body").find("div.mini").css("background-color","#bfa");
//(10)next() #one的下一个div
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
//(11)nextAll() #one后面所有的span元素
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
//(12)nextUntil() #one和span之间的元素
$("#one").nextUntil("span").css("background-color","#bfa")
//(13)parent() .mini的父元素
$(".mini").parent().css("background-color","#bfa");
//(14)prev() #two的上一个div
//prev()
$("#two").prev("div").css("background-color","#bfa")
//(15)prevAll() span前面所有的div
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
//(16)prevUntil() span向前直到#one的元素
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
//(17)siblings() #two的所有兄弟元素
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa")
//(18)add()选择所有的 span 元素和id为two的元素
// $("span,#two,.mini,#one")
$("span").add("#two").add("#one").css("background-color","#bfa");
- DOM增删改
/**
文档处理
内部插入
appendTo(content) a.appendTo(b); 把a加到b里面 添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面 添加到最前面
外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面
替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b
删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a
*/
- DOM CSS样式操作
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass("redDiv blueBorder")
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类 什么也不写，全部删除
$divEle.removeClass("redDiv blueBorder")
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass("redDiv blueBorder")
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
//获取，和 设置
var pos = $divEle.offset();
$divEle.offset({
top:100,
left:50
})
});
- DOM事件
只需要把代码写在$(function(){ jquery代码 })
3、window.onload & $(function(){})
window.onload只可以使用一次
$(function(){})可以使用多次
- DOM事件绑定
$(function(){
//*1.通常绑定事件的方式
//给元素绑定事件
//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
//绑定事件可以链式操作
$(".head").click(function(){
$(".content").toggle();
}).mouseover(function(){
$(".content").toggle();
});
//*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
//使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件
//toggle可以进行‘隐藏和显示‘的切换操作
$(".head").bind("click mouseover",function(){
$(".content").toggle();
});
//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
$(".head").one("click mouseover",function(){
$(".content").toggle();
});
//4.live方法会为现在及以后添加的元素都绑定上相应的事件
$(".head").live("click",function(){
$(".content").toggle();
});
$("#panel").before("<h5 class='head'>什么是jQuery?</h5>");
});
//5点击第一个button，将#bj上的mouseenter事件移除
//unbind()可以移除指定的事件，只需要传一个事件名作为参数
//unbind(type,[data|fn]])
//type事件类型 当传入type的时候会解除type事件
//如果没有传入type值，会移除所有事件
$("button:eq(0)").click(function(){
$("li").unbind("click mouseenter");
});
- 事件冒泡
//冒泡就是事件的向上传导，子元素的事件被触发，父元素的响应事件也会触发
//解决冒泡问题：return false;
//给span绑定一个单击响应函数
$("span").click(function(){
alert("我是span的单击响应函数");
//阻止冒泡
return false;
});
- 事件的动画
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])
*/
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(1000);
});
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(500);
});
//滑动
$("#btn5").click(function(){
$("#div1").slideToggle(1000,function(){单机之后回调函数中可以执行的功能});
}
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo("slow",Math.random());
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle("slow","linear");
});
- 全选全不选练习
var items = $("[name='items']");
//全选按钮
$("#checkedAllBtn").click(function(){
items.attr("checked",true);
$("#checkedAllBox").attr("checked",true);
});
//全不选按钮
$("#checkedNoBtn").click(function(){
items.attr("checked",false);
$("#checkedAllBox").attr("checked",false);
});
//反选按钮
$("#checkedRevBtn").click(function(){
items.each(function(){
this.checked = !this.checked;
});
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});
//提交按钮
$("#sendBtn").click(function(){
$(":checkbox[name='items']:checked").each(function(){
alert(this.value);
});
});
//全选/全不选复选框
$("#checkedAllBox").click(function(){
items.attr("checked",this.checked);
});
//全选/全不选复选框与items状态同步
$("[name='items']").click(function(){
var flag = $("[name='items']:checked").length==4;
$("#checkedAllBox").attr("checked",flag);
});
- Servlet的工作流程
servlet 的生命周期
从xml中获取初始化参数
寻找一些已经保存的context-param参数，或者已经默认的路径
进行存取一些参数set(get)Attribute
大致的JavaEE三层框架的流程：输入xxx.jsp--->根据里面的href=xxx--->使用xml找到对应的servlet程序--->调用service处理逻辑--->进行数据库交互
请求重定向request.getRequestDispatcher("/a/b/c.html").forward(request,response); response.sendRedirect("http://localhost:8080/07_servlet/response2");
req,resp(重定向(可以访问工程外的资源),回传客户端数据) get post ServletConfig ServletContext 请求转发(只能在本工程下面)
- 常见的响应码说明
200 表示请求成功
302 表示请求重定向
404 表示请求服务器已经收到了，但是你要的数据不存在(请求地址错误)
500 表示服务器已经收到请求，但是服务器内部错误(代码错误)
- jsp语法
六：jsp本质就是servlet 相当于可以在页面上添加java代码 (九大内置对象)
<%! 脚本声明(属性，块，方法，内部类) %>
/**<%!
private Integer id;
private String name;
private static Map<String,Object> map;
%> **/
<%= 表达式脚本(输出内容) %>
/**
<%=request.getAttribute("key")%>
**/
<% 代码脚本(java代码) %>
/**
<%
int i=12/0;
%>
**/
<%@ include file="静态包含内容" %>-----（较为常用）
<jsp: include page="动态包含页面"></jsp:include>
<jsp: forward page="请求转发路径"></jsp:include>
EL表达式------代替jsp表达式脚本 ${}------11个隐含对象---基本比较运算，是否为空，特殊键值对的取值
JSTL标签库----代替jsp代码脚本 <c:if test="EL表达式"></c:if>
<c:choose><c:when><c:otherwise>
/** <%
request.setAttribute("height",168);
%>
<c:choose>
<c:when test="${requestScope.height>190}">
<h1>小巨人</h1>
</c:when>
<c:when test="${requestScope.height>180}">
<h2>挺高了</h2>
</c:when>
<c:otherwise>
<%-- when的父类一定要是choose--%>
<c:choose>
<c:when test="${requestScope.height>23}">
<h3>非人类</h3>
</c:when>
</c:choose>
</c:otherwise>
</c:choose>**/
<c:forEach/>
/**
<%request.setAttribute("arr",new String[]{"120","119","110"});%>
<c:forEach items="${requestScope.arr}" var="item">
${item}<br>
</c:forEach>**/
<%-- 往域中保存数据
<c.set/>
作用：set标签可以往域中保存数据
域对象.setAttribute(key,varlue);
scope 属性设置保存到那个域
eg:request.setAttribute("height",168);
page表示pageContext域
request表示Request域
session表示Session域
application表示ServletContext
key 是多少
value 是多少
--%>
七：cookie
cookie的创建—服务器(Tomcat)==1：new Cookie(“键值对”)，2：response.addCookie(前面new出来的cookie)
cookie的获取—Cookie[] cookies=req.getCookies();—cookie.getName()
cookie的修改—cookie.setvalue(“要修改的值”)
cookie的创建，获取，修改，生命周期(这里可以复习–jsp和servlet之间的关系)
八：session
session创建，修改，超时控制（session会话的结束和cookie的消亡有关）
九：filter过滤器–继承Filter重写三个方法–需要配置拦截路径(也有执行方法–和servlet的xml配置相似)
本质：在请求服务器的时候，过滤一下(条件判断)是否举有访问服务器的条件
十：ThreadLocal 锁定线程
public static ThreadLocal threadLocal=new ThreadLocal();
threadLocal.set(Thread.currentThread().getName())； 锁
threadLocal.get(); 取
九，十 可以把数据连接用ThreadLocal锁起来，filter进行问题过滤—以实现数据提交 或 回滚的操作
十一：json可以把很对语言转化为字符串的形式进行数据的传送—操作json要使用Gson–jar包
json在java中的使用 javaBean/list/map和json的互相转化
1，就是在JavaScript中进行键值对的形式存在 var jsonObj={键:值} 这个里面可以嵌套
常用的方法：1：JSON.stringify()—json对象转化为字符串 2：JSON.parse()—字符串转化为json对象
2，导包：gson=new Gson(); 对象转化为字符串gson.toJson(Person) 字符串转化过去 gson.fromJson(string,Person.class);
3，list和map和gson之间的转换----> gson.fromJson(string,new TypeToken<HashMap<Integer,Person()>>{}.getType())
十二：AJAX请求---->是一种浏览器通过js异步发起请求，局部更新页面的技术
1，自己看API自己实现
2，ajax方法 url(请求的地址),type(请求的类型get/post),data(请求发送的方法action=xxx),success(成功的回调函数),dataType(text/xml/json响应的类型)
3，get/post方法 url,data,callback,type
4，getJSON方法 url,data,callback
5，列表的序列化 serialize()
十二：i18n国际化，中英转换
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
