JQuery基础
昨天内容回顾
filter过滤器：
1、会创建过滤器：右键-->new-->filter
2、考虑拦截路径和拦截方式
动态代理
'使用场景：在不改变源代码的情况下，对原始对象的方法进行增强。'
'实现前提：代理对象和真实对象要实现相同的接口'
使用步骤：
1、创建原始对象（如果有就不需要创建）
'2、动态创建代理对象（最难的）'
//用于创建代理对象的Class对象。
ClassLoader loader=原始对象.getClass().getClassLoader();
//代理对象和真实对象要实现相同的接口
//Class[] interfaces=原始对象.getClass().getInterfaces();
//这种写法的前提是：已知原始对象一定实现了HttpServletRequest接口
Class[] interfaces=new Class[]{HttpServletRequest.class}
Object proxy=Proxy.newProxyInstance(loader,interfaces,new InvocationHandler(){
/**
该方法的作用：处理代理对象要做的事（增强某些方法）
Object proxy:代理对象
Method method：调用代理对象的方法对象，例如：调用sale方法，那么method就是sale方法对象，调用show方法，那么method就是show方法对象
Object[] args：调用代理对象的方法传递的参数值
返回值：该返回值最终会返回给调用代理对象的方法，换一句话：谁调代理对象的方法就返回给谁。
*/
public Object invoke(Object proxy,Method method,Object[] args){
//1、通过判断增强方法
if(method.getName().equals("...")){
}
//2 对于不需要增强的方法，通过反射的形式调用原始对象对应的方法
return method.invoke(原始对象,args);
}
});
3、使用代理对象执行操作（调用代理对象的方法）
今日内容
1、jquery概念和语法
1.1 jquery概念：是一个js框架，本质就是一个js文件。作用是简化js代码的书写。
1.2 jquery的实现步骤：
1 将jquery文件复制到js目录并在页面引入jquery
2 使用jquery的方式获取元素对象，并调用方法、属性
'1.3js对象和jquery对象相互转换？
js对象：通过传统js方式是获取到的对象统称js对象。例如：document.getElementByXxx()
jquery对象：通过jquery方式获取到的对象统称jquery对象。例如:使用$()函数得到的对象。
区别：js对象和jquery对象的方法和属性不能混着调用。
关系：类似于String（js对象）和StringBuilder（jquery对象）之间的关系。可以相互转换
'js对象和jquery对象相互转换：
'js对象--->jquery对象：jquery对象=$(js对象)
'jquery对象--->js对象：jquery对象通过索引获取到的对象就是js对象,例如：jquery对象[索引]获取jquery对象.get(索引)
'注意：如果jquery对象不是一个数组，那么索引就只能是0，例如：jquery对象[0]获取jquery对象.get(0)
'1.4jquery核心函数：$(参数),传递的参数不一样，作用就不一样。
用法1:$("css选择器")，通过css选择器获取元素对象。例如：$("div")；
用法2:$(js对象),将js对象转换成jquery，那么就可以调用jquery的方法和属性
用法3:$(function(){}) ,当页面加载完成之后执行你们函数，相当于之前window.onload
用法4:$("html代码")，根据html代码创建元素对象，是一个jquery对象（了解）
'1.5 事件绑定：
入口函数：
$(function(){
//当页面加载完成之后执行你们函数
})
单击事件：
jquery对象.click(function(){
//当元素被单击之后，匿名函数就会执行
});
2、jquery选择器
1. 基本选择器(掌握)
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
'2. id选择器 ''
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
2. 层级选择器（掌握）
1. 后代选择器
* 语法： $("A B") 选择A元素内部的所有B元素
2. 子选择器
* 语法： $("A > B") 选择A元素内部的所有B子元素
3、jquery DOM操作
操作内容：
'1. html(): 获取/设置元素的内容体，设置的内容中如果有html标签就会被浏览器解析
不传参：获取内容体html代码；
传参：设置内容体html代码
2. text(): 获取/设置元素的内容体，设置的内容会被作为纯文本展示，就算有标签也不会被浏览器解析
'3. val()： 获取/设置元素的value属性值
操作属性：
'1. attr(): 获取/设置元素的属性
获取属性值： var value=jquery对象.attr("属性名")
设置属性：
jquery对象.attr("属性名","属性值");//设置一组属性
jquery对象.attr({ "属性名": "属性值","属性名": "属性值",... });
2. removeAttr("属性名"):删除属性
3. prop():获取/设置元素的属性，使用方式同attr()方法一样,这个只有在checked,selected,disabled的情况下,才会用到这种方式
4. removeProp("属性名"):删除属性
操作样式：css()
css("样式名")：根据样式名获取样式值；
css("样式名","样式值")：设置一组样式
css({"样式名":"样式值","样式名":"样式值",...})：设置多组样式
CRUD操作：添加元素、删除元素...
添加元素：父元素.append(子元素/html)；
移除元素：要移除的元素对象.remove();
清空子元素：父元素.empty();
4、案例
1.jquery概念和快速入门
- jquery概念：是一个js框架，封装了js代码，本质是一个js文件，简化我们js代码的书写。
- 使用步骤
1.将jquery文件复制到项目中，在需要的html引入js文件
<script src="js/jquery-3.3.1.min.js"></script>
2.使用jquery提供的函数；
2.jQuery核心函数(重点1)
2.1 jquery核心函数：$()：参数值不一样作用就不一样
- $(匿名函数)：页面加载完成事件
$(function(){
//当页面加载完成之后，匿名函数会执行
});
- $(html/js对象)
如果传递的是html代码：创建html代码对应的标签元素对象（可以包含子元素）
例如:$("<div><p>Hello</p></div>").appendTo("body");//动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中
如果传递的是js对象：将js对象转换成jquery对象
js -- > jq : $(js对象)
- $("selector")：传递css选择器，用于根据css选择器获取询元素对象
$("p"):获取所有的p元素；
$("#pid"):获取id="pid"的元素
2.2. jquery对象和js对象相互转换(重点)
js对象：使用document.getElementByxxx获取的对象都是js对象；
jquery对象：我们自己使用$()函数获取对象都是jquery对象，jquery对象也是js对象的一个包装对象；
js对象和jquery对象之间的关系类型于java中String和StringBuilder的关系？
js对象相当于String对象，jquery对象相当于StringBuilder；String和StringBuilder可以相互转换，但是方法不能混着调用；同理js对象和jquery对象也可以相互转换，但是各自的方法不能相互调用；
jq -- > js : jq对象[索引] 或者 jq对象.get(索引)，如果jquery对象不是数组，那么索引值就是0；
js -- > jq : $(js对象)
3.jQuery事件绑定以及样式控制(重点2)
3.1 常见的事件(重点)
0.页面加载完成事件
$(function(){
//当页面加载完成之后，匿名函数会执行
});
1.单击事件
jquery对象.click(function(){
//当元素被单击之后，匿名函数就会执行
})
使用代码触发单击事件：jquery对象.click(); //触发之后上述的匿名函数就执行
2.失去焦点事件
jquery对象.blur(function(){
//当元素失去焦点之后，匿名函数就会执行
})
3.表单提交事件
$("form").submit( function () {
return false; //return true表示运行提交，return false表示阻止提交，但是不写默认提交
});
3.2 样式控制
css()函数：既可以或者样式值，还可以设置样式值；
获取样式值：var value＝jquery元素对象.css("属性名");
设置样式值：
jquery对象.css("属性名","属性值"); //设置一组样式值；
$("p").css({"属性名": "属性值", "属性名": "属性值" });//设置多组样式值；
说明：{"属性名": "属性值", "属性名": "属性值"}在js中称为对象；
4.jQuery选择器(部分选择器重点)
1. 基本选择器(掌握)
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
2. 层级选择器（掌握）
1. 后代选择器
* 语法： $("A B") 选择A元素内部的所有B元素
2. 子选择器
* 语法： $("A > B") 选择A元素内部的所有B子元素
3. 属性选择器（了解）
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器
* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
4. 过滤选择器（了解）
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
* 语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
5. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
* 语法： :eq(index) 指定索引元素
7. 大于索引选择器
* 语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
* 语法： :lt(index) 小于指定索引元素
9. 标题选择器
* 语法： :header 获得标题（h1~h6）元素，固定写法
5. 表单过滤选择器（了解）
1. 可用元素选择器
* 语法： :enabled 获得可用元素
2. 不可用元素选择器
* 语法： :disabled 获得不可用元素
3. 选中选择器
* 语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
* 语法： :selected 获得下拉框选中的元素
5.jQuery的DOM操作
5.1 内容操作（重点3）
1. html(): 获取/设置元素的内容体，设置的内容中如果有html标签就会被浏览器解析
不传参：获取内容体html代码；
传参：设置内容体html代码
2. text(): 获取/设置元素的内容体，设置的内容被作为纯文本展示，就算有标签也不会被浏览器解析
3. val()： 获取/设置元素的value属性值
5.2 属性设置
1. attr(): 获取/设置元素的属性
获取属性值： var value=jquery对象.attr("属性名")
设置属性：
jquery对象.attr("属性名","属性值");//设置一组属性
jquery对象.attr({ "属性名": "属性值","属性名": "属性值",... });
2. removeAttr("属性名"):删除属性
3. prop():获取/设置元素的属性，使用方式同attr()方法一样
4. removeProp("属性名"):删除属性
注意：如果操作的是checked、selected、disable等状态属性，使用prop()方法，操作其他属性使用attr()方法
5.3 class属性设置
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
* toggleClass("one"):
* 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
5.4 CRUD操作
1.追加子元素也叫添加子元素
父元素.append(子元素/html代码)；//在父元素内容后面追加子元素
子元素.appendTo(父元素)；//子元素添加到父元素内部后面
2.删除元素
被删除元素.remove();
3.清空所有子元素
父元素.empty();
6.jQuery案例
6.1 隔行换色
<script>
//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
$(function () {
//1. 获取数据行的奇数行的tr，设置背景色为pink
$("tr:gt(1):odd").css("backgroundColor","pink");
//2. 获取数据行的偶数行的tr,设置背景色为yellow
$("tr:gt(1):even").css("backgroundColor","yellow");
});
</script>
6.2 全选和全不选
<script>
//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
function selectAll(obj){
//获取下边的复选框
$(".itemSelect").prop("checked",obj.checked);
}
</script>
6.3 QQ表情选择
<script>
//需求：点击qq表情，将其追加到发言框中
$(function () {
//1.给img图片添加onclick事件
$("ul img").click(function () {
//2.追加到p标签中即可。
$(".word").append($(this).clone());
});
});
</script>
6.4 下拉列表中条目左右移动
<script>
//需求：实现下拉列表选中条目左右选择功能
$(function () {
//toRight
$("#toRight").click(function () {
//获取右边的下拉列表对象，append(左边下拉列表选中的option)
$("#rightName").append($("#leftName>option:selected"));
});
//toLeft
$("#toLeft").click(function () {
//appendTo 获取右边选中的option，将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
</script>
晚自习总结
1、jquery语法
1.1 概念：jquery是一个js框架，可以简化js操作。
1.2 使用步骤：
1、将jquery文件复制到工程中，并在需要的页面引入jquery。
2、使用jquery提供的函数或者属性
'1.3 js对象和jquery对象直接相互转换
js对象：通过传统js方法获取到的对象都是js对象
jquery对象：通过jquery核心函数得到的对象都是jquery对象。
js对象----->jquery对象：$(js对象)
jquery对象----->js对象：jquery对象.get(索引)或者jquery对象[索引]
'1.4 jquery核心函数：$(参数)，传递的参数不一样作用就不一样。
用法1：$("css选择器")，根据css选择器查找元素
用法2：$(js对象)，将js对象转换成jquery对象
用法3：$(function(){//入口函数，页面加载完成事件})
'1.5 jquery的事件绑定
1、页面加载完成事件
$(function(){
//当页面加载完成之后执行匿名函数
})
2、单击事件
jquery对象.click(function(){
//当元素被单击之后执行匿名函数
})
通过代码触发单击事件：jquery对象.click();//相当于点了一下按钮
3、失去焦点事件
jquery对象.blur(function(){
//当元素失去焦点之后执行匿名函数
})
通过代码触发失去事件：jquery对象.blur();
4、内容改变事件，一般用于select下拉列表
jquery对象.change(function(){
//当内容改变之后执行匿名函数
})
'5、表单提交事件
$("form").submit( function () {
//submit按钮被点击之后执行匿名函数
return true/false;//返回true表示允许提交，false表示阻止提交，默认提交。
} );
通过代码提交表单：$("form").submit();
2、jquery选择器
基础选择器：
元素选择器、'id选择器'、class选择器、并集选择器(选择器1,选择器2,...)
层级选择器：
后代选择器、子元素选择器
'3、jquery的DOM操作
'操作内容：html()、text() 、val()
操作属性：
'attr():
attr("属性名");//根据属性名获取属性值
attr("属性名","属性值");//设置一组属性
attr({"属性名":"属性值","属性名":"属性值",...});//设置多组属性
'prop():如果操作元素的checked, selected, 或 disabled状态，请使用.prop()方法。
prop()方法的使用和attr()方法一致。
操作样式：
css():
css("样式名");//根据样式名获取样式值
css("样式名","样式值");//设置一组样式
css({"样式名":"样式值","样式名":"样式值",...});//设置多组样式
CRUD操作：
添加元素：父元素.append(子元素/html);
移除元素：被移除元素.remove();
清空子元素：父元素.empty();
4、案例
看完文章之后，给自己一些激励，也让大家认识一下自己，何乐而不为呢。。。
