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

JQuery

qq_43624670 2019-06-08 23:30 190 查看 https://blog.csdn.net/qq_43624

jQuery

jQuery是什么?

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery优点:

一、总是面向集合
二、 多行操作集于一行

首先要我们引入js代码如下:

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

一、jQuery的选择器


我就不一一介绍 写几个简单的jQuery选择器的代码:

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

标签选择器

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

详情可参考网站:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

二、jQuery(html)

我们假设让复选框的数据选中

$(function(){
var checked='${s.shobby}';//数据库传过来的数据
var ck=checked.split(",");
$.each(ck,function(n,val){
$(":checkbox[name='shobby'][value="+val+"]").prop("checked",true);
});
})

利用按钮给下拉框添加指定内容

<script type="text/javascript">
$(function(){
$(":input[name='name1']").click(function(){
$("#sel1").append("<option value='1'>湖南省</option>")
})
$(":input[name='name2']").click(function(){
//将"<option value='1'>娄底</option>"html  jQuery实例追加带id=sel2中
$("<option value='1'>娄底</option>").appendTo("#sel2 ")
})
</script>
<body>
<select id="sel1">
<option value="-1">---请选择---</option>
</select>
<select id="sel2">
<option value="-1">---请选择---</option>
</select>
<input type="button" name="name1" value="add1" />
<input type="button" name="name2" value="add2" />
</body>

三、JS和Query的转换

<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插件

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);
});
}

$.extend(defaults,options)

.fen {
background: #ff66ff;
}

.yello {
background: #ffff66;
}

.red {
background: #ff3333;
}

.write {
background: #9999ff;
}

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

jQuery中的ajax

//json数组
Teacher t1 = new Teacher("1", "a");
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(t1));

//json数组
Teacher t2 = new Teacher("2", "b");
List<Student> list = new ArrayList<>();
list.add(t1);
list.add(t2);
System.out.println(om.writeValueAsString(list));

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

详情可参考:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

今天就更新到这里
喜欢的可以关注我
不定时更新

标签: