jquery基本操作笔记

jq和js

可以共存，不能混用；

$(‘.box‘).css(‘background‘,‘red‘);
$(".box").css({ color: "#ff0011", background: "blue"});
$(‘li:eq(2)‘).css(‘background‘,‘red‘);  //：first选择
$(‘li:odd‘).css(‘background‘,‘red‘);  //even奇数行，odd偶数行
$(‘li‘).filter(‘.box‘).css(‘background‘,‘red‘);  filter过滤、筛选；
$(‘li‘).filter(‘[title=hello]‘).css(‘background‘,‘red‘);

方法函数化：

window.onload = function(){};
$(function(){});
function $(){}
innerHTML = 123;
html(123)
function html(){}
onclick = function(){};
click(function(){})
function click(){}
$(‘#div1‘).click(function(){
        alert( $(this).html() );
});

jquery中的this的写法是   $(this)  ；html()  因为方法函数法的思想的存在，() 是不能省去的，运行函数；这在jquery中很常见；

js和jquery的关系：

可以互存，不能混用；

 $(function(){
    $(‘#div1‘).click(function(){
        //alert( $(this).html() );  //jq的写法；
        //alert( this.innerHTML );  //js的写法；这样写也是正确的；
        alert( $(this).innerHTML );  //错误的；前面是jquery，后面是js，混用了，不允许；
        alert( this.html() );  //错误的；前面是js，后面是jquery，混用了，不允许；
    });
});

链式操作：

$(function(){
    /*var oDiv = $(‘#div1‘);
    oDiv.html(‘hello‘);
    oDiv.css(‘background‘,‘red‘);
    oDiv.click(function(){
        alert(123);
    });*/
    $(‘#div1‘).html(‘hello‘).css(‘background‘,‘red‘).click(function(){
        alert(123);
    });
});

建议熟悉了，再写链式写法；

取值和赋值合体：

赋值和取值用的同一种方法，只不过是通过有没有参数来决定是取值还是赋值；

$(function(){
    //oDiv.innerHTML = ‘hello‘;  //赋值
    //alert( oDiv.innerHTML );  //取值
    //$(‘#div1‘).html(‘hello‘);  //赋值
    //alert( $(‘#div1‘).html() ); //取值
    css(‘width‘,‘200px‘)  //设置width是200px；
    css(‘width‘)  //获取width的值；
});

取值和赋值：获取的时候只能获取一个，赋值的时候赋值到所有的；

$(function(){
    //alert( $(‘li‘).html() );  //当一组元素的时候，取值是一组中的第一个；会弹出内容：aaa
    $(‘li‘).html(‘hello‘);  //当一组元素的时候,赋值是一组中的所有元素
});

$()下的常用方法

attr()

$(function(){
    //alert($(‘div‘).attr(‘title‘));  获取title属性
    $(‘div‘).attr(‘title‘,‘456‘);  //设置title
    $(‘div‘).attr(‘class‘,‘box‘);  //设置class
});

filter：过滤

not： filter的反义词

$(function(){
    //$(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘); //只带有box的才会被选择
    $(‘div‘).not(‘.box‘).css(‘background‘,‘red‘); //不带有box的才会选择；not和filter是反义词
});

has和filter的区别

has是包含的意思，选择的是元素里面的东西；

而filter针对的元素自身的选择；

$(function(){
    //$(‘div‘).has(‘span‘).css(‘background‘,‘red‘);
    //$(‘div‘).has(‘.box‘).css(‘background‘,‘red‘);   //has是选择元素里面的东西，不能选择到第二个div
    $(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘);  //filter是针对元素自身的;只会选择到第二个div
});

next和prev：

next选择下一个兄弟节点；

prex选择上一个兄弟节点；

find    查找当前元素下所有的后代元素；

eq()    一组中的第几个；

index()  一组元素的索引；通过一组索引，来控制另外一个索引；

$(function(){
    alert( $(‘#h‘).index() );  //索引就是当前元素在所有兄弟节点中的位置；
});

选项卡：

原生js和jquery：

window.onload = function(){
    var oDiv = document.getElementById(‘div1‘);
    var aInput = oDiv.getElementsByTagName(‘input‘);
    var aCon = oDiv.getElementsByTagName(‘div‘);
    for(var i=0;i<aInput.length;i++){
        aInput[i].index = i;
        aInput[i].onclick = function(){
            for(var i=0;i<aInput.length;i++){
                aInput[i].className = ‘‘;
                aCon[i].style.display = ‘none‘;
            }
            this.className = ‘active‘;
            aCon[this.index].style.display = ‘block‘;
        };
    }
};

$(function(){

$(‘#div1‘).find(‘input‘).click(function(){

$(‘#div1‘).find(‘input‘).attr(‘class‘,‘‘);

$(‘#div1‘).find(‘div‘).css(‘display‘,‘none‘);

$(this).attr(‘class‘,‘active‘);

$(‘#div1‘).find(‘div‘).eq( $(this).index() ).css(‘display‘,‘block‘);

});

});

<body>
<div id="div1">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
</body>

这里的jquery是根据js的思路来编写的；

也可以用其他的思路来做这个选项卡，用到siblings()等；

addClass和removeClass

$(function(){
    $(‘div‘).addClass(‘box2 box4‘);
    $(‘div‘).removeClass(‘box1‘);
});

width()   innerWidth()   outerWidth()  获取元素的宽和区别：

$(function(){
    alert( $(‘div‘).width() );  //width
    alert( $(‘div‘).innerWidth() );  //width + padding
    alert( $(‘div‘).outerWidth() );  //width + padding + border
    alert( $(‘div‘).outerWidth(true) );  //width + padding + border + margin
});

insertBefore()  insertAfter()  

注意：insertBefore是剪切的功能，不是复制的功能；

$(function(){
    //$(‘span‘).insertBefore( $(‘div‘) );  //将span调整到div的前面，jq中的insertBefore和js中的insertBefore是一样的;具备剪切的功能，而不是复制的功能；
    //$(‘div‘).insertAfter( $(‘span‘) );  //将div放在span的后面；
    //$(‘div‘).appendTo( $(‘span‘) );   //和js中的appendChildren是一样的;作用是把一个节点添加到指定节点最后的位置;
    //$(‘div‘).prependTo( $(‘span‘) );  //原生js中没有，作用是把一个节点添加到指定节点最开始的位置;
    //insertBefore和before的区别 ：后续操作变了;主要是我们写链式操作会有影响;
    //$(‘span‘).insertBefore( $(‘div‘) ).css(‘background‘,‘red‘);
    $(‘div‘).before( $(‘span‘) ).css(‘background‘,‘red‘);
});

remove()  删除节点

$(function(){
    $(‘div‘).remove();
});

on()  off()   事件的写法：

off取消事件；

$(function(){
    /*$(‘div‘).click(function(){
        alert(123);
    });*/
    /*$(‘div‘).on(‘click‘,function(){   //支持多个事件，支持系统事件和自定义事件
        alert(123);
    });*/
    /*$(‘div‘).on(‘click mouseover‘,function(){   //多个事件，中间用空格
        alert(123);
    });*/
    /*$(‘div‘).on({
        ‘click‘ : function(){   //中间用冒号
            alert(123);
        },
        ‘mouseover‘ : function(){
            alert(456);
        }
    });*/   //点击弹出123.移入弹出456  说明on还是很灵活的
    $(‘div‘).on(‘click mouseover‘,function(){
        alert(123);
        $(‘div‘).off(‘mouseover‘);  //执行后，mouseover事件会被关闭
    });
});

scrollTop()   获取和设置滚动距离

$(function(){
    $(document).click(function(){
        alert( $(window).scrollTop() );  //获取滚动距离
    });
});

编写弹窗效果：

首先，在DOM中创建元素是非常容易的事情；

var oDiv = $(‘<div>div</div>‘);  //创建div元素和内容
$(‘body‘).append( oDiv );

弹窗效果：

$(function(){
    $(‘#input1‘).click(function(){
        //动态创建元素和内容
        var oLogin = $(‘<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>‘);  //中间不能有空格
        $(‘body‘).append( oLogin );  //插入元素
        //让弹窗居中
        oLogin.css(‘left‘ , ($(window).width() - oLogin.outerWidth())/2 );   //设置left值
        oLogin.css(‘top‘ , ($(window).height() - oLogin.outerHeight())/2 );  //设置top值
        $(‘#close‘).click(function(){
            oLogin.remove();   //移除节点
        });
        //在调整窗口大小事件和滚动事件，调整弹出窗的位置；
        $(window).on(‘resize scroll‘,function(){  //在调整窗口大小事件和滚动事件
            oLogin.css(‘left‘ , ($(window).width() - oLogin.outerWidth())/2 );
        oLogin.css(‘top‘ , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );  //top值要注意加上滚动距离
        });
    });
});

ev  pageX  which 

preventDefault  stopPropagation

one()

$(function(){
    /*$(‘div‘).click(function(ev){
        //ev : jq中直接使用，是兼容后的event对象
        //ev.pageX(鼠标坐标-->相对于文档的)    js中是使用clientX(相对于可视区域的)
        //ev.which : js中的keyCode
        ev.preventDefault();  //阻止默认事件
        ev.stopPropagation();  //阻止冒泡的操作
        return false;   //阻止默认事件 + 阻止冒泡的操作
    });*/
    $(‘div‘).one(‘click‘,function(){  //one-->只执行事件一次
        alert(123);
    });
});

offset()  position()

$(function(){
    //div2.offsetLeft
    //alert( $(‘#div2‘).offset().left );  //获取到屏幕的左距离  offset().left  offset.top()
    alert( $(‘#div2‘).position().left );  //到有定位的父级的left值,把当前元素转化成类似定位的形式,注意是不算margin的
});

parent() offsetParent()   获取有定位的父级

parent() : 获取父级，不管父级是否有定位； 注意这里没有加s，不是parents，jq中还有parents()方法，见下

offsetParent() : 获取有定位的父级

$(function(){
    //parent() : 获取父级
    //offsetParent() : 获取有定位的父级
    //$(‘#div2‘).parent().css(‘background‘,‘blue‘);
    $(‘#div2‘).offsetParent().css(‘background‘,‘blue‘);
});

val()  获取元素的value值；

size() 获取一组元素的长度；像length；

each() jq中的循环；原生for循环的加强版

$(function(){
    //alert( $(‘input‘).val() ); 获取value值
    //$(‘input‘).val(456);  赋值value值
    alert( $(‘li‘).size() );  //4 获取一组元素的长度;像length
    $(‘li‘).each(function(i,elem){   //一参：下标 二参 : 每个元素
        $(elem).html(i);
    });
});

拖拽jquery实现：

$(function(){
    var disX = 0;
    var disY = 0;
    $(‘div‘).mousedown(function(ev){
        disX = ev.pageX - $(this).offset().left;   //存储距离
        disY = ev.pageY - $(this).offset().top;
        $(document).mousemove(function(ev){
            $(‘div‘).css(‘left‘,ev.pageX - disX);
            $(‘div‘).css(‘top‘,ev.pageY - disY);
        });
        $(document).mouseup(function(){
            $(document).off();  //鼠标弹起的时候取消事件
        });
        return false;  //阻止默认事件和冒泡
    });
});

hover()      模拟css中的hover，鼠标移入移除；

hover         鼠标移入和鼠标移除结合的方法；

hover(function(){},function(){})

Show() hide()            接受一个参数- ->  时间（ms）               长，宽，透明度都要变化

fadeIn()   fadeOut()    淡出效果和淡出效果  改变透明度

fadeTo()    指定到一个范围，有两个参数，第一个是时间，第二个是透明度值

$(‘#div2‘).fadeTo(1000,0.5);

slideDown()   slideUp()         向下展开，向上卷起；

get()方法

$(function(){
    //document.getElementById(‘div1‘).innerHTML
    //alert( $(‘#div1‘).get(0).innerHTML );  get需要标注下标；将jquery转成原生js
    /*for(var i=0;i<$(‘li‘).get().length;i++){  //这里通过get()转成js，这里的length相对于js的
        $(‘li‘).get(i).style.background = ‘red‘;
    }*/
    for(var i=0;i<$(‘li‘).length;i++){  //这里的length是JQ中的属性,也是使用正确的；
        $(‘li‘).get(i).style.background = ‘red‘;
        //$(‘li‘)[i].style.background = ‘red‘;  得到元素后，后面加一个中括号，写成下标的形式，也就自动转成原生js的形式了;这是一种偷巧的写法；
    }
});

outerWidth与原生的区别：

$(function(){
    //alert( $(‘#div1‘).get(0).offsetWidth );  //这里原生js，如果把div1设置为隐藏，获取的值为0;
    alert( $(‘#div1‘).outerWidth() );  //不管是显示和隐藏的，都可以获取到值;
});

text()    会获取所有的内容（特例），不会获取到标签，而html会获取到标签；

$(function(){
    //alert( $(‘div‘).html() );
    //alert( $(‘div‘).text() );  //会获取所有的内容(特例)
    $(‘div‘).text(‘<h3>h3</h3>‘);  //在浏览器中会输出纯文本<h3>h3</h3>
});

remove()和detach（）的区别：

//remove方法删除元素的时候会把元素的操作行为也删除掉；

//detach() : 跟remove方法一样，只不过会保留删除这个元素的操作行为

$(function(){
    $(‘div‘).click(function(){
        alert(123);
    });
    var oDiv = $(‘div‘).detach();  //这里如果用remove()，恢复的时候，点击行为会无效
    $(‘body‘).append( oDiv );
});

$()   :  $(document).ready()  与window.onload=function(){}的区别：

$(function(){  //等DOM加载完就可以执行了 , 性能要好
});
是
$(document).ready(function(){
});
的简写；

 window.onload = function(){}; //等图片和flash等加载完才执行;

//DOMContentLoaded

parents()   closest()

//parents() : 获取当前元素的所有祖先节点，参数就是筛选功能

//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素

$(function(){
    //$(‘#div2‘).parents().css(‘background‘,‘red‘);  //获取到所有祖先节点 div1，body，html
    //$(‘#div2‘).parents(‘.box‘).css(‘background‘,‘red‘);  //获取到class为box的祖先元素
    $(‘#div2‘).closest(‘.box‘).css(‘background‘,‘red‘);
});

siblings() 获取元素的所有兄弟节点 ；

nextAll() 获取下面所有的兄弟节点；

preAll() 获取上面所有的兄弟节点；

parentsUntil()   nextUntil()   prevUntil()

//siblings() : 找所有的兄弟节点，参数也是筛选功能

//nextAll() : 下面所有的兄弟节点，参数也是筛选功能

//prevAll() : 上面所有的兄弟节点

//Until() : 截止

$(function(){
    $(‘span‘).nextUntil(‘h2‘).css(‘background‘,‘red‘);
});

clone()  克隆节点：

$(function(){
    //$(‘div‘).appendTo( $(‘span‘) );   //剪切行为
    //$(‘span‘).get(0).appendChild( $(‘div‘).get(0) );
    //clone() : 可以接收一个参数 ，作用可以复制之前的操作行为
    $(‘div‘).click(function(){
        alert(123);
    });
    $(‘div‘).clone(true).appendTo( $(‘span‘) ); //参数true作用可以复制之前的操作行为
});

wrap()  wrapAll()  wrapInner()  unwrap()   包装，包装方法

在外面包裹一下

$(‘span‘).wrapInner(‘<div>‘); //在span外包装div

wrapAll() 整体包装：

//wrap() : 包装

//wrapAll() : 整体包装; 会影响结构

//wrapInner() : 内部包装;

//unwrap() : 删除包装 ( 删除父级 : 不能删除body )

$(function(){
    //$(‘span‘).wrapInner(‘<div>‘);   div在span里面了
    $(‘span‘).unwrap();
});

add()

$(function(){
    /*var elem = $(‘div‘);
    var elem2 = elem.add(‘span‘);
    elem.css(‘color‘,‘red‘);
    elem2.css(‘background‘,‘yellow‘);*/
    $(‘li‘).slice(1,4).css(‘background‘,‘red‘);
});

slice()

$(‘li‘).slice(1,4).css(‘background‘,‘red‘);

第一个参数是起始位置，4是结束位置（选中的不包括结束位置）；

serialize()    serializeArray()   数据串连化

$(function(){
    //console.log($(‘form‘).serialize());  //string : a=1&b=2&c=3
    console.log( $(‘form‘).serializeArray() );
    [
        { name : ‘a‘ , value : ‘1‘ },
        { name : ‘b‘ , value : ‘2‘ },
        { name : ‘c‘ , value : ‘3‘ }
    ]
});
</script>
</head>
<body>
<form>
    <input type="text" name="a" value="1">
    <input type="text" name="b" value="2">
    <input type="text" name="c" value="3">
</form>

jquery中的animate()

//animate() :

//第一个参数 : {} 运动的值和属性

//第二个参数 : 时间(运动快慢的)  默认 : 400 毫秒

//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(缓冲，慢快慢) linear(匀速) ) 默认是缓冲（慢快慢）

//第四个参数 :  回调函数；运行结束后，回调函数

$(function(){
    $(‘#div1‘).click(function(){
        $(this).animate({width : 300 , height : 300} , 3000 , ‘linear‘,function(){
            alert(123);   //回调函数，也可以用链式操作来写；
        });
        $(‘#div2‘).animate({width : 300 , height : 300} , 3000 , ‘swing‘);
    });
});

链式操作来写：先宽后高；和上述的回调函数效果一致；

$(this).animate({width : 300} , 2000).animate({height : 300} , 2000);

Stop()方法：

$(‘#div2‘).click(function(){
        //$(‘#div1‘).stop();   //默认 : 只会阻止当前运动（当前步骤）
        //$(‘#div1‘).stop(true); //阻止所有后续的运动
        //$(‘#div1‘).stop(true,true); //立即停止到当前步骤指定的目标点，当前步骤的目标点
        // stop不能做到，点一下-->直接到最后的目标点-->用finish()
        $(‘#div1‘).finish();  //立即停止到所有指定的目标点，到最后的目标点
    });

delay()

延迟

jquery中事件委托：

delegate()   undelegate()

$(function(){
    /*$(‘li‘).on(‘click‘,function(){
        this.style.background = ‘red‘;
    });*/
    $(‘ul‘).delegate(‘li‘,‘click‘,function(){   //事件委托
        this.style.background = ‘red‘;
        $(‘ul‘).undelegate();  //阻止事件委托
    });
});

trigger()  主动触发

$(function(){
    /*$(‘#div1‘).on(‘click‘,function(){
        alert(123);
    });
    $(‘#div1‘).trigger(‘click‘);  //主动触发*/
    $(‘#div1‘).on(‘show‘,function(){
        alert(123);
    });
    $(‘#div1‘).on(‘show‘,function(){
        alert(456);
    });
    $(‘#div1‘).trigger(‘show‘);
});

事件细节：

$(function(){
    $(‘#div1‘).on(‘click‘,{name:‘hello‘},function(ev){
        //alert(ev.data.name);    这里的ev.data等于{name:‘hello‘}这个整体，ev.data.name就是hello
        //alert( ev.target );  当前操作的事件源，全兼容的
        alert( ev.type );   当前操作事件类型
    });
});

jquery的工具方法：

我们前面的都是$().css()  $().html()  $().val()  : 只能给JQ对象用；

而实际上，我们还存在另外一种写法：   不仅可以给jquery用，也可以给原生js用；

$.xxx()  $.yyy()  $.zzz()  : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法

type()

trim()

$(function(){
    //var a = null;
    //$.type() : 也是判断类型，功能更加强大，能判断出更多的类型
    //alert( typeof a ); 原生js的判断变量类型
    //alert( $.type(a) ); 用$.type()判断出更多类型，功能更强大
    var str = ‘    hello    ‘;
    alert(‘(‘+$.trim(str)+‘)‘);  //$.trim()去除前后的空格
});

inArray()   类似于 indexOf

proxy()  改变this指向；

$(function(){
    //var arr = [‘a‘,‘b‘,‘c‘,‘d‘];
    //alert( $.inArray(‘b‘,arr)  ); //b在array这个数组中的位置；若没有会返回-1；有的话就返回位置
    //proxy()  : 改变this指向的
    function show(n1,n2){
        alert(n1);
        alert(n2);
        alert(this);
    }
    //show();
    //$.proxy(show , document)(); //show的this指向document
    //$.proxy(show , document,3,4)();  //对于传参，传参可以这样传
    ////$.proxy(show , document,3)(4);  //也可以这样混着传参

    //jquery中为什么要这样传参呢？
    //$(document).click( $.proxy(show,window)(3,4)  ); //如果这样传参，刷新就直接调用函数
    $(document).click( $.proxy(show,window,3,4)  );  //这样传参，就是在click后才会调用函数，而不会直接调用；  

});

$.noConflict()  防止冲突

//$ , jQuery  $=jQuery 一回事 $不是jQuery独有的

//noConflict() : 防止冲突的
var aaa= $.noConflict();
var $ = 10;
aaa(function(){
    aaa(‘body‘).css(‘background‘,‘red‘);
});

parseJSON()  把字符串转换成json类型

var str = ‘{"name":"hello"}‘;  //字符串必须是严格的JSON格式
alert($.parseJSON( str ).name);  //把字符串转换成json

makeArray() 

window.onload = function(){
    var aDiv = document.getElementsByTagName(‘div‘);  //只是集合，不是真正的数组，我们叫做类数组（类似于数组）
    $.makeArray(aDiv).push();  //通过 $.makeArray(aDiv) 把 类数组 转换成 真正的数组
};

jquery中使用ajax

<script>
/*$.ajax({
    url : ‘xxx.php‘,
    data : ‘name=hello&age=20‘,
    type : ‘POST‘,   //默认是get
    success : function(data){  //请求成功以后的回调函数
        alert(1);
    },
    error : function(){   //请求失败之后
        alert(2);
    }
});*/
$.get(‘xxx.php‘,function(){    //ajax的get请求可用get()，第一个是地址，第二个是成功后回调
});
// $.get()和$().get()是有区别的；前者是ajax的get请求方法，后者是将jQuery对象转换成js原生对象
$.post(‘xxx.php‘,function(){
});
$.getJSON(‘xxx.php?callback=?‘,function(data){  //请求json类型的数据,支持jsonp的形式：指定?callback=?
    data
});
随机({});
</script>

jQuery中的插件

扩展插件

//$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()

//$.fn.extend  :  扩展到JQ对象下的插件形式  $().xxx()  $().yyy()

用插件实现去掉左空格

$.extend({
    leftTrim : function(str){
        return str.replace(/^\s+/,‘‘); //这里用正则来去掉左空格
    }
});
var str = ‘  hello  ‘;
alert( ‘(‘+$.leftTrim(str)+‘)‘ );  //利用leftTrim去掉左空格
$.extend({    //用extend，json的写法，可以扩展多个
    leftTrim : function(str){
        return str.replace(/^\s+/,‘‘); //这里用正则来去掉左空格
    },
    rightTrim : function(){},
    aaa : function(){
        alert(1);
    }
});

$.fn.extend({  //也是写成json形式

drag : function(){   //这里扩展拖拽
        //this : $(‘#div1‘)
        var disX = 0;
        var disY = 0;
        var This = this;  //这里将this存入变量This中；
        this.mousedown(function(ev){
            disX = ev.pageX - $(this).offset().left;
            disY = ev.pageY - $(this).offset().top;
            $(document).mousemove(function(ev){
                This.css(‘left‘ , ev.pageX - disX);
                This.css(‘top‘ , ev.pageY - disY);
            });
            $(document).mouseup(function(){
                $(this).off();
            });
            return false;
        });
    },
    aaa : function(){
        alert(2);
    }
});

//$.trim()
//$.leftTrim()
/*var str = ‘  hello  ‘;
alert( ‘(‘+$.leftTrim(str)+‘)‘ );*/
$(function(){
    $(‘#div1‘).drag();  //这里调用上面插件的扩展
});
$.aaa();  // 1
$().aaa();  //2
时间： 2024-10-18 18:14:25

jquery基本操作笔记的相关文章

jQuery学习笔记（一）：入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

Js脚本之jQuery学习笔记（1）

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习笔记--JqGrid相关操作 方法列表（上）

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

jQuery整理笔记七----几个经典表单应用

1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

jQuery学习笔记之过滤器三（向上查找兄弟元素、向下查找兄弟元素）

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

jQuery整理笔记八----jQuery的Ajax

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我觉得说法挺靠谱的. jQuery封装了Ajax的交互过程,用户不需要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接.发送请求.发送方式.接收方式等细节,利用jQuery定义 的几个简单方法,即可轻松实现客户端与服务端异步通信的问题,从而帮助开发人员从繁琐的技术细节中解脱出来,专心于业务层开发工作. 最初始的JavaScrip

jquery练习笔记

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> #pannel { position:relative; width:100px; height:100px; b

jQuery 入门笔记1

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多). 1:jQuery使用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#