前期使用准备
$核心函数
<script type="text/javascript">
$(function (){ //表示页面加载完成之后,相当于onload事件 $就是一个函数
var $btn = $("#btn"); //表示按id查询标签对象
$btn.click(function (){
alert("jQuery的单击事件")
});
$("<div> 对象</div>").append("body");
var $btns = $("#btn1"); //id
alert($("button").length); //标签名
$(".qq"); //class
});
</script>
传入参数为HTML字符串时,根据这个字符串创建元素节点对象
传入参数为 选择器字符串时,根据这个字符串查找元素节点对象
$("#id属性值");
$(“标签名”);
$(".class属性值");
传入参数为DOM对象时。将DOM对象包装为jQuery对象
dom对象和jQuery对象的区别
alert("nima");
document.getElementById("123").innerHTML = "这个是dom对象";
// $("#123").innerHTML = "这是ce"; //jQuery用不了dom对象的方法
//jQuery和Dom对象的转化:
//1.dom->jQuery:
var a = $(document.getElementById("123"));
alert(a);
//2.jQuery->dom:
alert(a[0]); //通过下标转过去dom对象
选择器
基本选择器
<script type="text/javascript">
$(function (){
//查找id为one的元素
$("#btn1").click(function (){
//css方法可以设置和获取样式
$("#one").css("background-color","#bbffaa"); //id
})
$("#btn2").click(function (){
//css方法可以设置和获取样式
$(".min").css("background-color","#dcddff"); //class
})
$("#btn3").click(function (){
//css方法可以设置和获取样式
$("div").css("background-color","red"); //标签名
})
$("#btn4").click(function (){
//css方法可以设置和获取样式
$("*").css("background-color","blue"); //*全部
})
$("#btn5").click(function (){
//css方法可以设置和获取样式
$("div,#two").css("background-color","blue"); //组合选择器,div和id为two的
})
})
</script>
层级选择器
<script type="text/javascript">
$(function (){
//查找id为one的元素
$("#btn1").click(function (){
$("body div").css("background-color","#bbffaa"); //选择body中的所有div标签
})
$("#btn2").click(function (){
//css方法可以设置和获取样式
$("body > div").css("background-color","#dcddff"); //选择body中的子元素,孙子元素不选择
})
$("#btn3").click(function (){
//css方法可以设置和获取样式
$("#one+div").css("background-color","red"); //id为one的下一个div元素,选择同级的元素
})
$("#btn4").click(function (){
//css方法可以设置和获取样式
$("#two~div").css("background-color","blue"); //id为two后面的所有同级的div元素
})
})
</script>
过滤选择器
<script type="text/javascript">
$(function (){
//基本过滤器
var a =$("button:first") //查找第一个button元素
var b = $("button:last") //查找最后一个button元素
alert($("button:not(.min)").length) //查找class不是min的button元素
$("button:odd") //查找索引为奇数的
$("button:even") //查找索引为偶数的
$("button:eq(1)") //查找索引为1的,从0开始
$("button:gt(1)") //查找索引大于1的
$("button:lt(1)") //查找索引小于1的
$(":header") //标题
$(":animated") //正在执行动画的所有元素
});
</script>
属性过滤器和内容过滤器
<script type="text/javascript">
$(function (){
//内容过滤器: :内容情况
$("div:contains('John')"); //查找含有john的div元素
$("#btn1").click(function (){
$("td:parent").css("background-color","#bbffaa"); //查找含有内容的td元素
})
$("td:empty") //查找没有内容的td元素
$("div:has(p)") //含有p的div元素
//属性过滤器: [属性]
$("div[id]") //含有id属性的div
$("div[id=123]") //含有id属性为123的div
$("div[id!=123]") //含有id属性不为123的div
$("input[name$='letter']") //查找name属性以letter结尾的input元素
$("input[name^='letter']") //查找name属性以letter开头的input元素
$("input[name*='letter']") //查找name属性以letter开头的input元素
$("input[id][name*='letter']") //查找有id属性,name属性以letter开头的input元素
//表单过滤器 :type类型
$(":text:enabled").val("输入写入的字符串") //选择表单内的可输入的test类型的元素
$(":password") //选择表单内的password类型的元素
$(":submit") //选择表单内的submit类型的元素
$(":checkbox:checked"); //选择表单中选中的复选框元素
//获取全部选中的复选款标签对象
$("#btn5").click(function (){
var a = $(":checkbox:checked"); //取出复选框选中的内容
for( var i = 0; i < a.length;i++)
alert(a[i].value);
})
$("#btn6").click(function (){
var a = $("select option:selected"); //选中的option对象,获取下拉列表选中的内容
a.each(function (){
alert(this.innerHTML);
});
})
})
</script>
元素的筛选
<!--
eq() 获取索引的元素
first()获取第一个元素
last() 获取最后一个元素
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给的选择器,有一个匹配就返回true
has(exp) 返回含有匹配元素的元素
not(exp) 删除含有匹配元素的元素
children(exp) 返回子元素
find(exp) 后代元素
next() 下一个兄弟元素
next All() 后面的所有兄弟元素
nextUtil() 当前到指定之前内的元素
parents() 返回父元素
属性操作
<script type="text/javascript">
$(function (){
//不传参数是获取,传参数是设置
$("div").html(); //获取
$("div").html("<h1>我是div中的标题1</h1>"); //设置,会转成html格式
//不传参数是获取,传参数是设置
$("div").text(); //获取
$("div").text("<h1>我是div中的标题1</h1>"); //设置,都是文本格式
//val 设置和获取表单项的value属性值
//attr 不推荐操作 checked readOnly selected disabled
alert($(":checkbox:first").attr("name")); //获取checkbox的name属性值
$(":checkbox:first").attr("name","abc"); //设置checkbox的name属性值
//prop 只推荐操作上面不操作的
//和attr差不多,checked的状态返回的是true false 而attr的状态返回的是checked或者undefind
})
</script>
DMO操作
<script type="text/javascript">
$(function (){
//内部插入
//a.appendTo(b) 插入到b内的成为b的最后一个子元素
//a.prependTo(b) 插入到b内的成为b的第一个子元素
//外部插入
//a.insertAfter(b) 得到ba
//a.insertBefore(b) 得到ab
var a = $("#div1");
$("<h1>标题</h1>").insertBefore(a); //在a的前面插入
//替换
// a.replaceWith(b) //用b替换a,a不见了
$(a).replaceWith($("<h1>标题</h1>")); //把一个a变成h1
$(a).replaceAll($("<h1>标题</h1>")); //把所有的标题变成a
//删除
//a.remove() 删除a标签
//a.empty(); 把标签内的东西都清除掉
})
</script>
CSS样式操作
<script type="text/javascript">
$(function (){
$("#btn1").click(function (){
$("#div1").addClass('class03'); //添加css样式
})
$("#btn2").click(function (){
$("#div1").removeClass('class03'); //删除css样式
})
//toggleClass 有就删除,没有就添加
//offset() 获取元素在文档的位置
//设置位置offset
$("#btn3").click(function (){
var a = $("#div1").offset();
console.log(a);
$("#div1").offset({
top:100,
left:50
})
})
})
</script>
动画
</script>
<!--
基本动画: 长宽的缩减
show()显示
hide()隐藏
toggle()切换状态
淡动画: 对可见度的缩减
fadeIn() 淡入 慢慢可见
fadeOut()淡出 慢慢消失
第一个参数是动画的时长,以毫秒为单位
第二个参数是动画的回调函数(动画完成后自动调用的函数)
-->
<script type="text/javascript">
$(function (){
$("#btn1").click(function (){
$("#div1").show(1000,function (){ //show()显示
alert("show动画完成");
});
})
$("#btn2").click(function (){ //hide()隐藏
$("#div1").hide(1000);
})
$("#btn3").click(function (){ //toggle()切换状态
$("#div1").toggle(1000,function (){
alert("toggle动画完成");});
})
var abc = function (){ //反复调用,一直执行动画
$("#div1").toggle(1000,abc)};
abc();
})
</script>
事件
<script type="text/javascript">
文档加载
执行顺序:先执行jQuery,然后再执行原生js的onload,js比较慢是因为需要先读取标签请求的参数后才执行
执行次数:原生js的页面加载完成之后,只会执行最后一次的赋值函数,jQuery是把全部注册的function函数依次执行
事件处理
click() 绑定单击事件,触发单击事件
事件移除
事件冒泡
父子元素同时监听一个事件,当子元素的事件触发时,父元素的事件也触发响应 在子元素内加入return false就可以阻止冒泡
事件对象
event
$(function (){
//jQuery获取事件对象
$("#div1").click(function (event){
alert("我是div");
console.log(event);
})
$("#span1").click(function (){ //冒泡: 不加return false的话,会触发父类的事件
alert("我是span");
})
})
//原生的获取事件对象
window.onload = function (){
document.getElementById("div2").onclick = function (event){
console.log(event);
}
}
</script>
XML
简介
可扩展的标记性语言
作用
1用来保存数据,而且具有自我描述性
2可以作为项目的配置文件
3还可以作为网络传输数据的格式
语法
//1xml文件的声明
<?xml version="1.0" encoding="utf-8" ?>
版本号 编码字符集
//2xml标签格式
1名称可以含字母数字以及其他字符
2名称不能以数字或则标点开始
3名称中间不能空格
4可以写成单标签
h
//xml是强语法,和html差不多,比较严格,没有html的自动修复功能
//3xml语法规则
1只有一个父标签,最大的标签不能有兄弟标签
2属性值比较加引号
3特殊字符要加符号 < >
4文本区域CDATA 告诉xml解析器,我CDATA的内容都只是纯文本,不需要解析,这样就不用每次都转义
格式:<![CDATA [这里可以把你输出的字符原样显示,不会解析 ]]>
xml解析
dom4j解析
1.创建一个lib目录,添加dom4j的jar包,并add to libary 添加架包到项目内
2.创建需要生成的对象和属性值,getset方法,构造器和空构造器
3.关键代码:
/*
读取books.xml生成的book类
*/
@Test
public void test2() throws Exception {
//1.读取books.xml
SAXReader saxReader = new SAXReader();
Document document = saxReader.read("src/books.xml");
//2.通过dmo对象获取根元素
Element rootElement = document.getRootElement();
System.out.println(rootElement);
//3.通过根元素获取book标签对象
//element和elements都是通过标签名查找子元素
List<Element> books = rootElement.elements("book");
for(Element book:books){
//把标签对象转化成标签字符串
Element name = book.element("name");
String nameText = name.getText();
String priceText = book.elementText("price");
String authorTest = book.elementText("author");
String snValue = book.attributeValue("sn");
//把获取的属性值封装新建成一个book对象
System.out.println(new book(snValue,nameText,Double.parseDouble(priceText),authorTest));
}
//4.遍历,处理每个book对象转换为book对象
}