Python学习第156天（jQuery部分知识回顾）
今天继续关于bootstrap的部分知识讲解，过程中涉及了很多关于jQuery部分的知识，因为不知道就回看了一下，先看代码，根据代码找到对应的知识点。
<script> $(function () { bindEvent(); bindSave(); }); function bindEvent() { $('#addBtn').click(function () { $('#addModal').modal('show'); }) } function bindSave() { $('#btnSave').click(function () { var postData = {}; $('#addModal').find('input,select').each(function () { var v = $(this).val(); var n = $(this).attr('name'); if(n=='gender'){ if($(this).prop('checked')){ postData[n] = v; } }else{ postData[n] = v; } }); $.ajax({ url: '/add_student/', type: 'POST', data: postData, success:function (arg) { // arg是字符串 // JSON.parse将字符串转换成字典， json.loads var dict = JSON.parse(arg); if(dict.status){ window.location.reload(); }else { $('#errorMsg').text(dict.message); } } }) }); } </script>
首先说一下jQuery是怎么遍历找到的所有input、select标签中的数据，集中在：
var postData = {}; $('#addModal').find('input,select').each(function () { var v = $(this).val(); var n = $(this).attr('name'); if(n=='gender'){ if($(this).prop('checked')){ postData[n] = v; } }else{ postData[n] = v; } });
如果想要在某个元素下寻找特定的元素，仅仅依靠上面这个方法，就必须对 $("#id")获取的元素进行遍历，获取其子元素。如此一来就显得格外的繁琐，代码量也非常庞大。
于是这就需要用到find()方法。
$("#id").find("#child")； $("#id").find(".child")； $("#id").find("input[type=‘image‘]")
非常方便好用。
除了上面的find()方法之外，还有一种查找子元素的方法。
最基本的：$(".child",parent);
each()方法
有的时候经常会用到数组。在不知道each()方法前，如果碰到数组遍历，
接着是<span>标签
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法
$(this).attr(key,
value); 设置节点属性的值，相当于setAttribute(key,value)方法
eg:<div id="w_1"
class="widget" diywidgetid="${template.diyWidgetId}"></div>
var
diywidgetid = $('#w_1').attr('diywidgetid'); //获取节点属性的值
$(this).val();获取某个元素节点的value值，相当于$(this).attr(“value”);
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr(“value”,value);
eg:<input id="i_eg" value="1" type="text"></input>
var i_eg=$('#i_eg').val(); // 获取元素节点的value 值
prop（）方法
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
最关键的jQuery自定义方法：
总结：
* jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$("#**").aa()
*jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa()
* jQuery中添加自定义或函数方法3,（只是在前2种方法的基础上添加了参数处理，严格来说不算一种jQuery 自定义方法）如: $.myFuncThree("www.baidu.com",'hello',myFuncThreeCB);
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<input type="button" value="按钮" id="myBtn" >
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
})
/**
* jQuery中添加自定义或函数方法1,如$.fn.extend({'aa':function(){}})或jQuery.fn.aa=function(){},这种调用时就得这样,$("#**").aa()
*/
jQuery.fn.myFuncOne=function(){
alert("我的自定义jquery方法1");
}
jQuery.fn.extend({
'myFuncFour':function(){
alert("我的自定义jquery方法4");
}
})
/**
* jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa()
*/
jQuery.extend({
'myFuncTwo':function(){
alert("我的自定义jquery方法2");
}
})
/**
* jQuery中添加自定义或函数方法3,如 $.myFuncThree('/post/getsecurejsonpost',{}, function(data) {});
*/
$.myFuncThree = function(url, data, successCB){
alert("我的自定义jquery方法3,参数："+url);
if(successCB){//回调
successCB(url);
}else{
alert("没有回调");
}
}
function myFuncThreeCB(url){
alert("myFuncThreeCB+"+url)
}
/*
* 测试按钮
*/
$("#myBtn").click(function(){
$("#myBtn").myFuncOne();
$("#myBtn").myFuncFour();
$().myFuncTwo();
$.myFuncThree("www.baidu.com",'hello',myFuncThreeCB);
$.myFuncThree("www.baidu.com",'hello');
})
</script>
</html>
今天内容很杂，算是笔记吧。。。
