您的位置：首页 > Web前端 > JQuery

认识jQuery

2019-06-08 20:37 1266 查看

一、jQuery是一个轻量级的javascript类库，是一个被封装好的JS文件，提供了更为简便的元素操作方式。
jQuery封装了DOM
jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
jQuery核心理念：Write Less Do More（简单来说就是：少写多做）

jquery的导入

<script type="text/javascript" src="${pageContext.request.contextPath }js/jquery-3.3.1.js"></script>

jquery的简单选择器

id选择器

$("#a").click(function(){
var stu = $("#stu").val();
alert(stu);
})

标签选择器

$("button").click(function(){
var sname = $("#sname").val();
alert(sname);
})

类选择器

$(".a").click(function(){
var stu= $("#stu").val();
alert(stu);
})

包含选择器：E1 E2
组合选择器：E1,E2,E3

jquery与Js的转换

<script type="text/javascript">
var $sname=$("#sname");
alert(sname.val());
//jQuery对象转js对象
var sname Node=$sname.get(0);
alert(snameNode.value);

var sname2=documnet.getElementById("sname2");
alert(sname2.value);
//js对象转jQuery对象
var $sname2Node=$(sname2);
alert($sname2Node.val());
</scirpt>
<body>
<input type="hidden" id="sname" value="sname" />
<input type="hidden" id="sname2" value="sname2" />
</body>

jquery插件

往jquery类库里面去扩展方法，这类方法就是jquery插件
jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

eg:

//json对象的字符串体现形式
var jsonObjj = {
sid:'001',
sname:'ly'
}
console.log(jsonObjj);

var szjh=[1,2,3,4];
console.log(szjh)

//json混合模式的字符串
var hhjh = {id:1,hobby:['aaaaaa','aaaa']};
console.log(hhjh);

extend的实列

主要是调用方法，使编程快捷，代码量减少

var defaults = {//默认的属性
head :'fen',
out :'red',
over :'write',
}

$.fn.extend({
bgColor:function(option) {
$.extend(defaults,option)//参数有值就替换
//给默认值
$("table tr:eq(0)").addClass(defults.head);
$("table tr:gt(0)").addClass(defults.out);

//添加动态效果
$("table tr:gt(0)").hover(function() {
$(this).removeClass().addClass(defults.over);
}, function() {
$(this).removeClass().addClass(defults.out);
});
}

如果要修改，只改参数即可

$(function(){
$("table").bgColor({
head :'fen',
out :'write',
over :'yellow',
})

})

命名参数的写法
$.extend(defaults,options);

.fen {
background: #ff66ff;
}

.yello {
background: #ffff66;
}

.red {
background: #ff3333;
}

.blue {
background: #9999ff;
}

.green {
background: #bbff99;
}
.hui {
background: #d6d6c2;
}
<link href="${pageContext.request.contextPath }/js/jquery.table.css" type="text/css" rel="stylesheet"/>

jQuery的ajax请求

jackson

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);

int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));

转换

//json数组
Student stu1 = new Student("001", "aa");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(stu1));

//json数组
Student stu2 = new Student("002", "bb");
List<Student> list = new ArrayList<>();
list.add(stu1);
list.add(stu2);
System.out.println(om.writeValueAsString(list));

//混合moshi
Map<String, Object> map = new HashMap<>();
map.put("total", 2);
map.put("stus", list);
System.out.println(om.writeValueAsString(map));

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航