<code class="language-html">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,userscalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444" /> <script src="../js/mui.min.js</script> <script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
mui.init() //处理一维数组
var arr1 = ["aaa", "bbb", "ccc"];
$.each(arr1, function(i, val) { console.log(i + val);}); //处理二维数组
var arr2 = [
['a', 'aa', 'aaa'],
['b', 'bb', 'bbb'],
['c', 'cc', 'ccc']
];
$.each(arr2, function(i, item) { console.log(i + "====" + item); $.each(item, function(j, val) { console.log(j + "====" + val)
});
}); //处理json数据
var obj = {
one: 1,
two: 2,
three: 3
};
$.each(obj, function(key, val) {
console.log(key + "===" + val)
})//处理dom元素
$.each($("input:hidden"), function(i, val) {
console.log("i===" + i)
console.log(val.name)
console.log(val.value)
})
</script>
</body>
</html>
</code>您正在查看: js 分类下的文章
jQuery $.each()常见的几种使用方法
JSON.stringify()和JSON.parse()分别是什么
JSON.stringify() 从一个对象中解析出字符串
JSON.stringify({"a":"1","b":"2"})
结果是："{"a":"1","b":"2"}"
JSON.parse()从一个字符串中解析出JSON对象
var str = '{"a":"1","b":"2"}';
JSON.parse(str);
结果是：Object{a:"1",b:"2"}
e.target
$(e.target)是jQuery对象，e.target是DOM对象，比如$(e.target)可以通过$(e.target).html()获取元素内容，e.target可以通过e.target.innerHTML获取元素内容.val() 能够取到 针对text，hidden可输入的文本框的value值。
而 .attr('value') 可以取到html元素中所设置的属性 value的值，不能获取动态的如input type="text" 的文本框手动输入的值。回调函数callback
<html>
<head>
<title>回调函数(callback)</title>
<script language="javascript" type="text/javascript">
function a(callback)
{
alert("我是parent函数a！");
alert("调用回调函数");
callback('1234','http://yhbin.cn');
}
function b(id,url){
alert("我是回调函数b");
alert( id );
alert( url );
}
function c(){
alert("我是回调函数c");
}
function test()
{
a(b);
}
</script>
</head>
<body>
<h1>学习js回调函数</h1>
<button onClick=test()>click me</button>
<p>应该能看到调用了两个回调函数</p>
</body>
</html>注意：
1.执行顺序 test（）->a()->b()
2.b函数作为回调函数可以有参数，但是a(b)这里面不能带参数，可以在a()里面回调
jQuery遍历
1、children()
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
$('.div >ul:last').css('border', '3px solid red') class为div的最后一个子级ul加红色
$('.div ul').children(':last').css('border', '3px solid blue') class为div下的ul下的最后一个子级li
$('.div ul li:last').css('border', '3px solid red') class为div下的ul下的最后一个子级li
$('.div >ul:last').children(':last').css('border', '3px solid red') class为div下的最后一个ul下的最后一个子级li
2、find()
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点
3.find()相当于空格
4.children相当于>
3、parent()
$('.item-a:last').parent().css('border', '1px solid blue')
$('.item-a').parent(':last').css('border', '1px solid blue')
4、next()
$('.item-2:first').next().css('border', '1px solid blue') 找到第一个class为item-2的节点的下一个
$('.item-2').next(':first').css('border', '1px solid blue') 找到所有的class为item-2节点的下一个，然后找出其中的第一个
5、prev()
$('.item-3:last').prev().css('border', '1px solid red')
$('.item-3').prev(':last').css('border', '1px solid blue')
6、siblings() 所选节点的所有同级节点
$('.item-2').siblings(':last').css('border', '2px solid blue')
7、each()
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
$("li").each(function(index, element) {
index 索引 0,1
element是对应的li节点 li,li
this 指向的是li
})php 插件
1、validate $(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email:{
required:true,
email:true
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
});
});
</script>
2、ajaxForm $(form). ajaxForm ({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数
<script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
<script type="text/javascript">
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
3、lightBox $(linkimage).lightBox({options})
<script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
<div id="divtest">
<div class="title">
<span class="fl">我的相册</span>
</div>
<div class="content">
<div class="divPics">
<ul>
<li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
<img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
<img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
</a></li>
<li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
<img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('ul a').lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
</script>
4、jqzoom $(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
<script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
<div id="divtest">
<div class="title">
<span class="fl">图片放大镜</span>
</div>
<div class="content">
<a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
<img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
</a>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.content a').jqzoom({ //绑定图片放大插件jqzoom
zoomWidth: 200, //小图片所选区域的宽
zoomHeight: 200, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
</script>juqery之选择器
1、 层级选择器
1. $('div>p') 选择所有div元素里面的子元素p $("div").chindren("p")
> 直接子元素，隔层不成立
2. $('div p')选择所有div元素里面的p元素 $("div").find("p")
3. $(".prev+div").prev后的第一个节点 $('.prev').next('div')
4. $(".prev~div").prev后面的所有div兄弟（兄弟！）节点，隔层不算 $('.prev').nextAll('div')
2、基本筛选选择器
$(".div:first") class属性为div的第一个元素
$(".div:last") class属性为div的最后一个元素
$(".div:even") class属性为div的下标为偶数元素
$(".div:odd") class属性为div的下标为奇数元素
$(".aaron:eq(2)") class属性为aaron的下标为2的元素
$(".aaron:gt(3)") class属性为aaron的下标大于3的元素
$(".aaron:lt(2)") class属性为aaron的下标小于2的元素
3、可见性筛选选择器
<p id="div1" style="display:none;">display</p> 隐藏
<p id="div2" style="width:0;height:0">width/height</p> 隐藏
<p id="div3" style="visibility:hidden;opacity:0">visibility</p> 显示
$('#div1:visible')
$('#div1:hidden')
4、属性筛选选择器
//查找所有div中，属性name=p1的div元素
$('div[name=p1]')
//查找所有div中，有属性p2的div元素
$('div[p2]')
//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]')
//查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]')
//查找所有div中，属性name的值是用imooc开头的
$('div[name^=imooc]')
//查找所有div中，属性name的值是用imooc结尾的
$('div[name$=imooc]')
//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]')
//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]')
5、表单元素选择器
$(':password') == $('[type=password]')
$('input:text') == $('input[type="text"]') == $('input[type=text]')
6、表单对象属性筛选选择器
//查找所有input所有可用的（未被禁用的元素）input元素。
$('input:enabled')
//查找所有input所有不可用的（被禁用的元素）input元素。
$('input:disabled')
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')
7、特殊选择器this
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})jquery AJAX学习
1. getJSON
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
2.get $.get(url,[callback])
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。
$.get('http://www.imooc.com/data/info_f.php', function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友对我说：" + data.say + "</li>");
}, "json");
3.post $.post(url,[data],[callback])
参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。
$.post("http://www.imooc.com/data/check_f.php",
{num:$('#txtNumber').val()},
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
4.serialize $(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
$('#litest').html( $('form').serialize() );
5.ajax $.ajax([settings])
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。
$.ajax({
url: 'http://www.imooc.com/data/check.php',
method:'get',
dataType:'json',
data: { num: $("#txtNumber").val() },
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
6.ajaxSetup $.ajaxSetup([options])
先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在页面
<script type="text/javascript">
$(function () {
$.ajaxSetup({
type: 'POST',
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>jquery全选ajax删除
1、juqery全选
全选按钮
<input type="checkbox" id="check_box" onclick="selectall('lead_id[]');"/>列表按钮
<input name="lead_id[]" type="checkbox" value="<?php echo $value['lead_id'];?>" />function selectall(name) {
if ($("#check_box").prop("checked")==false) {
$("input[name='"+name+"']").each(function() {
this.checked = false;
});
} else {
$("input[name='"+name+"']").each(function() {
this.checked = true;
});
}
}2、post删除
function del_many(){
var ids='';
$("input:checkbox[name='lead_id[]']:checked").each(function(i, n){
ids += $(n).val() + ',';
});
if( ids ){
if ( confirm( '确定删除吗?' ) )
{
location.href = '?m=party_admin&c=leader_admin&a=dele_leader&leader_id=' + ids;
}
}else{
alert('请选择要删除的记录！');return false;
}
}3、编辑信息
function edit( id ){
$.post("?m=party_admin&c=activity_admin&a=activity_info",{activity_id:id},function(msg){
var data = eval('('+msg+')');
$('#edit_activitytitle').val( data.activity_name );
$('#edit_party_name').val( data.party_name );
$("select[name ='edit_activity_type'] option[value='"+data.activity_type+"']").attr('selected','selected');
$('#edit_activity_time').val( data.activity_time );
$('#edit_activity_palce').val( data.activity_place );
$('#edit_activity_partypeople').val( data.party_should_num );
$('#edit_activity_vilpeople').val( data.villager_should_num );
$('#edit_activity_leadpeople').val( data.leader_should_num );
$('#edit_activity_content').val( data.activity_contents );
$('#edit_activity_id').val( data.activity_id );
$('#upload_pics').val( data.activity_pic );
/* 照片显示 */
if ( data.activity_pic != '' )
{
$( '#upload_pics' ).val( data.activity_pic );
}
/* 党员显示 未到 + 已到 */
var party_people_arr = data['party_people'];
var new_party_people = '';
var sign_party_people = '';
if ( party_people_arr != undefined )
{
$.each( party_people_arr, function( key, value ) {
if ( value['is_sign'] == '0' )
{
new_party_people += "<span id="+ 'not_party_id_'+ value['person_id'] +">";
new_party_people += value['person_name'];
new_party_people += "</span>";
}
else
{
sign_party_people += "<span id="+ 'party_id_'+ value['person_id'] +">";
sign_party_people += value['person_name'];
sign_party_people += "</span>";
}
});
$( '#party_not_to' ).html( new_party_people );
$( '#party_sign_name' ).html( sign_party_people );
}
/* 手机端操作 1、启用 0、关闭 2、已完成 */
var mobile_operate_msg = '';
switch( data['mobile_operate'] )
{
case '0':
mobile_operate_msg = '启动手机端操作';
$( '#button_mobile_operate' ).attr( 'onclick', 'open_mobile_operate( '+ id +' );' );
break;
case '1':
mobile_operate_msg = '手机端操作已开启';
break;
case '2':
mobile_operate_msg = '手机端操作已完成';
break;
}
$( '#mobile_operate' ).html( mobile_operate_msg );
});
$( '#determine' ).attr( 'onclick', 'edit_submit();' );
/* 开始签到的方法绑定 */
$( '#start_sign' ).attr( 'onclick', "begin_start_sign( "+ id +" );" );
}kindeditor编辑器上传图片只有远程，没有本地
今天项目中有个用kindeditor编辑器的功能，里面的上传图片只能显示远程连接，没有本地的
开始没有思路，弹窗框的内容不知道在哪设置的，于是便一点点打断点，终于在image.js中找到了
这段代码判断编辑框显示什么，于是写console.log打印一下
很显然，远程为true，本地为false，所以导致不能上传本地的图片，设置本地上传为true即可
设置好看前台显示即可
测试成功
最新回复
haha: 887878
refewf: wefewfre
refewf: ededededeed
