标签：jQuery function extend alert jquery 理解 运用 click
1. 什么是jQuery
它是一个轻量级的javascript类库，别人写好的一个类。2. jQuery优点
2.1 总是面向集合2.2 多行操作集于一行 注1：就一个类“jQuery”，简写“$”
3、导入js库
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
4、三种程序入口的运用以及区别
/* $(fn)做为程序入口
$(fn)、$(document).ready(fn)与window.onload的区别？
*/
window.onload =function(){
alert("hello jQuery3");
}
$(document).ready(function(){
alert("hello jQuery2");
})
$(function(){
alert("hello jQuery1");
})
弹出顺序为：jQuery2--jQuery1--jQuery3
区别：
jQuery1和jQuery2谁在前面谁就先运行，jsp的dom树结构加载完毕即刻调用方法
jQuery3最后运行， jsp的dom树加载完、css、js等静态资源加载完毕再执行window.onload
5、jQuery的几种简单选择器
<script type="text/javascript">
$(function(){
//利用a标签获取jquery实例
/* $("a").click(function(){
alert("123");
}); */
//利用id等于a3获取jQuery实例
/* $("#a3").click(function(){
alert("123");
}); */
//利用class值等于c1来获取jquery实例
/* $(".c1").click(function(){
alert("123");
}); */
//利用包含的形式来获取jquery实例
/* $("p a").click(function(){
alert("123");
});
*/
//组合选择器
/* $("a,span").click(function(){
alert("123");
}); */
//第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
//如果第二个参数不填，那么默认是document
$("a","div").click(function(){
alert("123");
});
})
</script>
5.1 通过点击事件给jQuery的实例追加jsp代码
$(function(){
$(":input[name='name1']").click(function(){
//在id=selId1的select的jquery实例上追加"<option value='1'>湖南省</option>"的html jquery实例
$("#selId1").append("<option value='1'>湖南省</option>");
});
$(":input[name='name2']").click(function(){
//将"<option value='1'>长沙</option>"的html jquery实例追加到id=selId2的select标签jquery实例中
$("<option value='1'>长沙</option>").appendTo("#selId2");
})
页面显示：
6、jQuery跟js的互转
//jquery对象转js对象
var h1Node = $h1.get(0);
var h1Node = $h1[0];
alert(h1Node.value); */
var h2Node = document.getElementById("h2");
alert(h2Node.value);
//js对象转jquery对象
var $h2Node = $(h2Node);
alert(h2Node.val());
jQuery是一个类；
js的结构是一个元素（element）
7、this指针的作用
$(function(){
$(":input").click(function(){
//指的是事件源
alert(this.value);
$("a").each(function(index,item){
//指的是当前元素
alert(index+","+$(this).html()+","+$(item).html());
});
});
})
8、$.extend和$.fn.extend
$.extend是用来扩充jquery类属性或者方法
var jsonObj2 = {};
//用后面的对象扩充第一个对象
//$.extend(jsonObj2,jsonObj1);
//扩充值覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面的对象有新的属性，会继续扩充
$.extend(jsonObj2,jsonObj1,jsonObj3);
console.log(jsonObj2);
$.extend({
hello:function(){
alert("hello");
}
});
$.hello();
$.fn.extend是用来扩充jquery实例的属性或者方法所用
$.fn.extend({
sayHello:function(){
alert("nihao");
}
});
$("#yellow").sayHello();
alert("yellow");
用鼠标事件实现自动更换class样式
<style type="text/css">$(function(){
.fen{
background:#ff66ff;
}
.yello{
background:#ffff66;
}
.red{
background:#ff3333;
}
</style>
<script type="text/javascript">
$("table tr:eq(0)").addClass("yello");
$("table tr:gt(0)").addClass("red");
$("table tr:gt(0)").hover(function(){
$(this).removeClass().addClass("fen");
},
function(){
$(this).removeClass().addClass("red");
});
}) </script>
jsp页面显示
请忽略显示的数据的问题，咱只看效果
9、ajax的简单使用
1.1 什么是Jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。
1.2 核心代码
//JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现
ajax转换
Map<String,String> stu = new hashMap<>();
stu.add("男1","豆豆");
stu.add("男2","豆");
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj););
标签：jQuery,function,extend,alert,jquery,理解,运用,click 来源： https://www.cnblogs.com/ly-0919/p/11099301.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。