jquery常用操作

来源:百度文库 编辑:神马文学网 时间:2024/04/17 03:02:46

官方网站:http://jquery.com/ 
    jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing,
event handling, animating, and Ajax interactions for rapid web development

 

构造函数:
jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)
jQuery()(也可以$())

$(document).ready作用:
$(document).ready():是在DOM结构载入完后执行的
window.onload:所有文件(整个网页)都加载完后执行的
例如:
$(document).ready(function(){
alert("hello");
});
等同于
$(function(){
     alert("hello");
 });
 
开发中常用操作:
$('#element');//css id document.getElementByIdx("element")
$('.element');//css class
$('p');//html标签
$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式
$("p").text("Some new text.");//改变对象文本
$("p").append("hello");//给对象添加内容
$("img").attr({ src: "test.jpg", alt: "no content" });//改变对象文本
text,textarea值获取:
$("#text_id").attr("value") 或者 $("#text_id").val()
checkbox值获取:
$("#checkbox_id").attr("value")
var checked = $("input[@type=checkbox]:checked");
checked.size() == 1 ==>checked.val();
radio值获取:
$("input[@type=radio][@checked]").val()
选中的值: $('input[@name=items][@checked]').val();
select值获取:
$('#select_id').val()
选中的值:$("select[@name=items] option[@selected]").text();
 

Jquery FlexGrid:

具有分页排序功能的表格控件
官方网站:http://www.flexigrid.info/
$(document).ready(function(){
     grid= $("#flex-grid").flexigrid( {
           url: 'xx.action',
            dataType: 'json',//默认为xml
            method: 'POST',//默认为post
            colModel : [
                {display: '编号', name : 'id', width : 40, sortable : true, align: 'center'},
                {display: '姓名', name : 'name', width : 180, sortable : true, align: 'left'},
                {display: '部门', name : 'dept', width : 120, sortable : true, align: 'left'}
                ......
                ],
            buttons : [
                        {name: 'add', bclass: 'add', onpress : xxfunc},
                        {name: 'aelete', bclass: 'delete', onpress : xxfunc},
                        {separator: true}
                        ],
            searchitems : [
                {display: '编号', name : 'id'},
                {display: '姓名', name : 'name', isdefault: true}
                ],
            sortname: "id",//排序字段
            sortorder: "asc",
            usepager: true,//是否启用分页,默认为false
            title: '员工信息',//table名称
            queryTitle: '快速搜索',//搜索栏标题
            clearTitle: '重置',//搜索重置按钮名
            pagestat: '显示 {from} 至 {to},共 {total} 条记录',
            procmsg: '服务器查询中,请稍等 ...',
            useRp: true,//是否可以动态设置每页显示的结果数
            rp: 15,//每页显示记录数,默认为15
            rpOptions: [10,15,20,25,40], //可选择设定的每页结果数
            rowhandler: rowfunc,//行选择事件处理,如双击,右键菜单等;例如:function rowfunc(row) {$(row).dblclick(function(){.....});} 
          rowbinddata: true,//配合rowhandler,如在双击事件中获取该行的数据 
            showTableToggleBtn: true,
            width: document.body.scrollWidth, 
          height: window.screen.availHeight-window.screenTop-100,//flexigrid插件的高度
          striped: true, //是否显示斑纹效果,默认是奇偶交互的形式
            onSubmit: xxfunc
            }
            );
});

colModel属性:
display :显示名称
name :字段名称
width :宽度
sortable:是否可排序
process:处理程序(function)
hide :是否隐藏

 

ajax
格式如下:
$.ajax({
      url:'xx.action',
      type:'post',
      dataType: 'text',
      data:'param='+xx, 
      async: false ,
      success: function(data){
       alert(data);
      },
      error:function(){
       alert("联网失败");
      }
  });
async:默认true(异步请求),同步请求(false)将锁住浏览器,用户其它操作必须等待请求完成才可以执行。    
dataType支持类型:xml,html,script,json,jsonp,text   JQuery zTree 简介 JQuery zTree v1.1 发布,增加Radio功能
http://code.google.com/p/jquerytree/

     利用Jquery的核心代码,实现一套能完成大部分常用工作的Tree功能
     支持多种浏览器
     在一个页面内可同时生成多个Tree实例
     支持JSON数据
     支持一次性静态生成 和 Ajax异步加载 两种方式
     支持多种事件响应及反馈
     支持Tree的节点移动
     支持任意更换皮肤(依靠 css)
     支持极其灵活的Checkbox选择功能
     个性化图标
     简单的参数配置实现 灵活多变的功能

ZTree 最新更新日志 2010.06.29 v1.1
     对于CheckBox?状 态,增加CheckBox?显示状态,便于用 户快速查看节点选中状态
     增加Radio选择功能,并且可以根据需要设定最大选择个数
     对于Radio功能,增加 ZTREE_CHECK_MAX_ERROR事件,在无法选中节点时触发,便于用户自定义各种提示工作。
     将 v1.02 中新增的 css 定义拆分为 zTreeIcons.css