JQuery交互开发基础语法

JQuery是全球最流行用得最多的JavaSript函数库（没有之一），全世界访问最多的10000个网站中，55%在使用JQuery。JQuery包括以下基本功能。

HTML元素选取

基本选择器

(‘#id属性值’)  ———–>document.getElementById() (‘#id属性值’)  ———–>document.getElementById() (‘tag标签名称’)———–>document.getElementsByTagName();
(‘.class属性值′)//class属性值选择器 ( ‘ . c l a s s 属 性 值 ′ ) / / c l a s s 属 性 值 选 择 器 (‘*’) //通配符选择器
$(‘s1,s2,s3’) //联合选择器

层次选择器

$(s1 s2)后代选择器
在s1内部获得全部的s2节点(不考虑层次)

$(s1 s2) [父子]
直接子元素选择器:在s1内部获得s2的子元素节点(直接孩子，孙子不算)

$(s1 + s2) [相邻最近的兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(s1 ~ s2) [所有的兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

筛选选择器

基本筛选选择器

:not(selector) 去除所有与给定选择器匹配的元素
:first 匹配找到的第一个元素（非子元素）
:last 匹配找到的最后一个元素（非子元素）
:odd 匹配所有索引值为奇数的元素，从0开始
:even 匹配所有索引值为偶数的元素，从0开始
:eq(index) 匹配一个给定索引值的元素，从0开始
:get(index) 匹配所有大于索引值的元素，从0开始
:lt(index) 匹配所有小于索引值的元素，从0开始
:header 匹配标题

内容过滤选择器

:contains(内容)
包含内容选择器，获得节点内部必须通过标签包含指定的内容
:empty
获得空元素(内部没有任何元素/文本(空) )节点对象
:has(选择器)
内部包含指定元素的选择器

   $(“div:has(#apple)”)
    <div>hellodiv>
    <div><p>p>div>
    <div><span id=”apple”>span>div>
    <div><span class=”apple”>span>div>

:parent
寻找的节点必须作为父元素节点存在(必须是别人的父亲)

    $(“div:parent”)
    <div>linken love beijingdiv>
    <div>jack love shanghaidiv>
    <div>div>
    <div><img />div>
    <div>  div>

表单属性伪类选择器

:checked //过滤出被选中的复选框、单选按钮，一般为radio和checkbox
option:selected //选择所有被选中的option元素
$(下拉列表).val([value值，value值]);//选中特定值的下拉框
:enabled //选择所有可用元素，常用于input、select和textarea
:disabled //选择所有不可用元素，常用于input、select和textarea
:read-only //选择只读元素，常用于input和textarea
:focus //选择焦点的元素，常用于input和textarea

修改属性样式

一般JQuery的方法，既能get又能set

获取/设置属性

常规标签属性：attr()

().attr(属性名称);//获得属性信息值 ( ) . a t t r ( 属 性 名 称 ) ; / / 获 得 属 性 信 息 值 ().attr(属性名称，值); //修改属性的信息
().removeAttr(属性名称);//删除属性 ( ) . r e m o v e A t t r ( 属 性 名 称 ) ; / / 删 除 属 性 ().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值

    var jn={name:'tel','class':'pear',value:'132787323728',address:'沈阳'}
    $('#username').attr(jn);

$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值

    $('#username').attr('value',function(){
                return 10+30;
    });

class属性快捷操作

$("div").addClass('apple');//给class属性追加信息值
$('div').removeClass('orange');//删除class属性的信息值
$('div').toggleClass('orange');//开关class属性值操作

表单属性:prop()

复选框操作，true选中/false没有选中

    $("input[type='checkbox']").prop("checked");
    $("input[type='checkbox']").prop("checked",true);

表单属性:val()

    $("input").val();
    $("input").val("hello world!");

CSS修改

().css(name，value);//设置 ( ) . c s s ( n a m e ， v a l u e ) ; / / 设 置 ().css(name); //获取
$().css(json对象); //同时修改多个css样式(同上)

CSS()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 复合属性样式需要拆分为”具体样式”才可以操作
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等

事件

事件绑定

$().bind() 事件绑定使用

同一个对象绑定多个事件

    $(function(){
        $('div').bind('click',function(){
            console.log('谁在碰我？');
        });
        $('div').bind('click',function(){
             console.log('谁又在碰我？');
        });
        $('div').bind('mouseover',function(){
             //给div设置背景色
             $(this).css('background-color','lightgreen');
       //$('div').css('background-color','lightgreen');
        });
        $('div').bind('mouseout',function(){
             //给div设置背景色
             $(this).css('background-color','lightblue');
        //$('div').css('background-color','lightgreen');
        });
     });

为多个不同类型事件绑定同一个处理

事件彼此通过“一个”空格分隔

    $(function(){
        $('div').bind('click mouseover mouseout',function(){
            console.log('hello');
        });
     });

通过一个json对象同时绑定多个事件

$(function(){
     var jn = {
          click:function(){
              console.log('谁敢碰我？')
          },
          mouseover:function(){
              console.log('轻轻地小明来了')
          },
          mouseout:function(){
              console.log('轻轻地又走了');
          }
      }
    $('div').bind(jn);
});

动画效果

隐藏

function f1(){
    //隐藏 hidden
    //hide([时间参数 毫秒级][,处理函数])
    $('div').hide(3000,function(){
     alert('我消失了，你能看到么');
    });
}
function f2(){
    //显示 show
    //show([时间参数 毫秒级][,处理函数])
    $('div').show(3000,function(){
    alert('我又回来了');
    });
}
function f3(){
    $('div').toggle(2000);
}

垂直效果

function f1(){
    //隐藏 hidden
    $('div').slideUp(3000);
}
function f2(){
    //显示 show
    $('div').slideDown(3000);
}
function f3(){
    $('div').slideToggle(2000);
}

颜色渐变

$('div').fadeOut(3000);
$('div').fadeIn(3000);

设置透明度

$('#two').fadeTo(0,0.3);//fadeTo(speed, opacity 透多0-1透少, [callback])

原文链接：JQuery交互开发基础语法，欢迎访问个人博客。