jquery-使用小结
1、事件一个个的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.10.2.min_65682a2.js"></script>
</head>
//同一个对象绑定多个事件
<script type="text/javascript">
$(function() {
$('div').bind('click', function() {
alert(21212);
});
//鼠标移入事件
$('div').bind('mouseover', function() {
$(this).css('background-color', '#70a532');
});
//鼠标移出事件
$('div').bind('mouseout', function() {
$(this).css('background-color', 'red');
});
});
</script>
<body>
<p>jQuery实践绑定</p>
<div style="background-color: red;height: 122px;width: 122px;">
</div>
</body>
</html>
2、通过通过json同时绑定多个事件
<script type="text/javascript">
$(function() {
var jn = {
click:function(){
alert(2);
},
mouseover:function(){
alert(3);
},
mouseout:function(){
alert(4);
}
}
$('div').bind(jn);
});
</script>
3选择器
1基本选择器
$('#id属相值')------->document.getElementByid()
$('tag标签名')------->document.getElementByTagName()
$('s1,s2,s3')联合选择器
$('*')通配符选择器
<script type="text/javascript">
function one(){
$('#xuanze').css('background-color','red');
}
</script>
这个是id选择器
$('input') 这个是标签选择器
$('.appp') 这个是css名选择器
2层次选择器
根据父节点进行结点的选中
3 并行选择器
选中父节点 用关系数字选定下面的第几个的结点
4 内容过滤选择器
包含内容选择器，获得结点内部必须通过标签包含制定的内容
contains（内容）
$("div:contains(beijing)")
empty
获得空元素（内部没有任何元素/文本（空））结点对象
$("div:empty")
里面什么也没有，空格算是空文本
has
内部包含制定元素的选择器
$("div:has(#apple)")
是通过id 值进行寻找
parent
寻找的结点必须作为父节点存在
$("div:parent")
寻找结点里面的内容，有一点结点里面不能为空
为空的话就不死父节点了
5表单域选中
//$(:checked)过滤出被选中的复选框，单选按钮
alert($("input:lt(4):checked"));
console.log($("input:lt(4):checked")) ;
$("input:gt(3):lt(4):checked")
其中gt()下标大于多少的，lt()是下标小于多少的
两者一起组合使用需要注意
组合使用的话是当gt()确定好下标之后，以gt()考试的位置进行重新的排序，进行lt()的排列
下拉框的话是
$("input:lt(4):selected")
四：
$("#dds").attr('value');
1可以通过id class获取相应的值
2设置相应的值
$("#dds").attr('value','asasasas');
如果原来没有值得话加上，有的话就修改
3批量修改
用json进行批量修改
function one(){
var ij={name:'sdas',class:'sa'}
$("#dds").attr(ij);
}
4通过函数进行修改
这个方法纯属装x用
$("#dds").attr('value',function(){
return 12+30;
});
5删除属性
$("#dds").removeAttr('class');
class操作
$("#dds").attr('class','asasasas');
$("#dds").attr('class','asas');
修改class属性
后面的会吧前面的给覆盖
$("#dds").addClass('class','asas');
$("#dds").addClass('class','asas1212');
这个方法不会出现覆盖，会保留两个class属性
删除class属性
$("#dds").removeClass('asasasas');
只是删除class里面的值
$("#dds").removeAttr('class');
删除class的属性
开关class属性值
$("#dds").toggleClass('asasasas');
有的话就删除，没有的就加上
2标签包含内容的操作
$("#dds").html();
$("#dds").text();
（）里面如果有参数的话就是修改信息
如果为空的话就是获取信息
html()和text()
方法的区别
html()
获取的是结点里面全部的信息，包括里面的标签
text()
也是获取信息，但是他获取的是过滤掉标签的信息，也就是只获取文本信息
css样式操作
$("#dds").css('width');
获得css样式 行内，内部，外部，均可获得
普通的dom方式只能获得 行内样式
document.getElementsByTagName('div')[0].style.width;
value属性快捷操作
$("#dds").val();
括号里面为空的话是获取值，有值得话是更该、改值
$("#dds").val();
复选框
判断复选框的选中情况
$("#dds").attr('checked'); true选中false未选中
便利选中的项目，获得value值
var s=''
for(var i=0;i< $("#dds:checked").length){
$("#dds:checked:eq('+i+')").val();
s+= $("#dds:checked:eq('+i+')").val()+",";
删除逗号
s=s.substr(0,s.length-1);
}
设置多个复选框的选中
valus值等于2或4的被选中
$('.sasas').val([2,4])
val里面是数组
这就是val的强大之处
复选框的全选和全不选
$().attr('checked',true) 设置复选框选中
$().attr('checked',false) 取消复选框选中
$().attr('checked') 判断选中情况返回布尔值
下拉列表操作
获取当前选中的value
单选的
$('option:selected').val() 单选情况
多选的下拉列表
<select multiple="multiple">
</select >
加一个标签就好了
多选情况
$('select').val();
单选按钮
获得选中情况
$('.sa:select').val();
设置选中情况
$('.sa').val([value值元素]);
和复选框的一样，这个只能下、写一个
反选
for(var i=0;i<$('.hby').length;i++){
var flag= $('.sa:eq('+i+')').attr('checked');
$('.sa:eq('+i+')').attr('checked',!flag)
}
$符号的由来
就是一个函数，函数名称是$符号而已
jquery对象和dom对象关系
jquery对象：$('li')返回的就是jquery对象
dom 对象 ： document.getElementByid() 返回的就是dom对象
jquery对象和 dom 对象的转化
1两者的成员不能互相调用
jquery框架对象分析
jquery框架对象类型： jquery对象$对象
1 jquery对象就是各种选择器创建出来的对象
2 $对象就是函数对象
$对象可以调用的许多成员也是通过extend复制继承过来的
$.get() $.post()
以上无论是jquery对象还是$对象，他们90%以上的成员都是通过extend复制继承过来的
遍历方法
each()方法
$.each(数组/对象,function处理) $对象 调用
$(选择器).each(function处理) jquery对象 调用
1遍历对象
$.each(对象,function（k对象属性变量，v对象属性值变量）{})
var cat={name:'kity',age:'5',climb:function(){
alert('buhao');
}}
$.each(cat,function(k,v){
console.log(k+'22222'+v);
});
2遍历数组
$.each(数组,function（k数组属性变量，v数组属性值变量）{})
var color=['bule','read','green']
$.each(color,function(k,v){
console.log(k+'22222'+v);
});
3 遍历jquery对象
$('li').each(function(w对象下标索引值，f 代表具体的每个dom对象){})
window.onload=function(){
$('li').each(function(w,f){
//this代表遍历出来的每个dom对象
等同于f
console.log(w+'===='+f);
})
}
其中window.onload=function(){}
当js代买写到dom对象前面的时候需要写一下，获取上下文
$.each()等同于jquery.each()
这是$对象调用的成员
$('li').each
这是jquery对象调用的成员
dom对象也就是具体选中的值
jquery对象：通过各种选择器获得对象都市jquery对象
$对象：就是函数对象，$.get(); .......
⑦加载事件
1$(document).ready(function(){})
2$().ready(function(){})
3$(function(){})
jQuery加载事件和传统加载事件的区别
在同一个请球中，jquery加载事件可以设置多个，而传统的加载事件只能设置一个
传统的加载方式是给onload事件附值，多次赋值，后面的会覆盖前面的
jquery加载事件是把每一个加载的事件都存到一个数组里面，成为数组的元素，执行的时候就遍历该数组的每个元素即可，因此，可以设置多个加载事件。
加载的时机不同
传统的加载事件，是全部内容（文字，图片，样式）在浏览器中加载完成之后才执行加载事件
jquery方式，只要全部内容（文字，图片，样式）在内存里面对应的dom树节点绘制完成就给执行，有可能对应的内容在浏览器中还没有显示
jquery文档事件操作
1结点追加
1.1 父节点追加
新节点的追加
后置追加
<ul id="zhu">
<li>哈哈</li>
<li>啦啦啦</li>
<li>我我我</li>
</ul>
<ul id="zhu">
<li>哈哈1</li>
<li>啦啦啦·</li>
<li id="ad">我我我1</li>
</ul>
$('#zhu').append("<li>tata</li>");
追加到了我我的后面，在这里就是以ul为父节点在后面追加的
$('#zhu').prepend("<li>tata</li>");
追加到了，哈哈的前面
已有结点的移动到我我我的后面了
$('#zhu').append($("#ad"));
把id为ad的结点我我我1追加到了
<input onclick="过程代码this">
<input onclick="函数()">
function 函数（）{this}
itnode.onclick=函数名称；
function名称（）{this}
itnode.onclick= function名称（）{this}
以上4种情况，第二种this代表window,其他三种代表input元素结点对象
事件绑定
$().bind(事件类型，function 事件处理);
$().bind(类型1 类型2 类型3，function 事件处理);
取消事件绑定
$().unbind();
事件委派
$('li').live('click',function(){})
取消的话是 die
为什么要用事件委派
如果用append的话新增加的结点的事件是绑定不上的，所以要用live委派处理
事件对象，阻止浏览器默认动作，阻止冒泡事件
$().bind('click',function(evt){window.event});
$().click(function(evt){});
$().bind('mouseover',f1)
function f1(evt){}
事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容的处理
$().click(function(evt){
evt.preventDefault();
evt.stopPropagation();
});
这两个方法在jquery做好封装了，就是兼容的处理。2017/2/17
动画效果
隐藏
$('div').hide();
显示
$('div').show();
渐进效果
hide([事件参数毫 秒][处理函数]);
$('div').hide(3000，function(){
});
$('div').toggle(3000);
开关
垂直动画效果
隐藏
$('div').slideUp(3000);
显示
$('div').slideDown(3000);
显示
$('div').slideToggle(3000);
淡入淡出
透明度在变化
隐藏
$('div').fadeOut(3000);
显示
$('div').fadeIn(3000);
$('div').fadeTo(speed,透明度，函数);
jquery封装ajax
$.ajax
$.ajax({
url:'we.php',
data:{title:'哈哈',date:'4-1'},
dataType:'json',
type:'post',
success:function(mas){
}
});
$.ajax({
type: 'POST',
url: '<{:U('Index/public_menuLeft')}>',
data: {menuid: menuid},
cache: false,
beforeSend: function(){
removeLeft();
//更新标题名称
$('body').layout('panel', 'west').panel({title: title});
var loading = '<div class="panel-loading">Loading...</div>';
$("#leftmenu").accordion("add", {content: loading});
},
success: function(data){
removeLeft();
//左侧内容更新
$.each(data, function(i, menu) {
var content = '';
if(menu.son){
var treedata = $.toJSON(menu.son);
content = '<ul class="easyui-tree" data-options=\'data:' + treedata + ',animate:true,lines:true,onClick:function(node){openUrl(node.url, node.text)}\'></ul>';
}
$("#leftmenu").accordion("add", {title: menu.name, content: content, iconCls:'icons-folder-folder_go'});
});
leftAreaChangeListen();
}
});
$.post
$.post('<{:U('Index/login?dosubmit=1')}>', $("form").serialize(), function(data){
if(!data.status){
$.messager.alert('提示信息', data.info, 'error');
changeCode();
}else{
$.messager.progress({text:'加载中，请稍候...'});
window.location.href = data.url;
}
},'json');
if (I('get.dosubmit')){
$admin_db = D('Admin');
$username = I('post.username', '', 'trim') ? I('post.username', '', 'trim') : $this->error('用户名不能为空', HTTP_REFERER);
$password = I('post.password', '', 'trim') ? I('post.password', '', 'trim') : $this->error('密码不能为空', HTTP_REFERER);
