jQuery基本语法与应用

Posted 2021-04-08 学士后35班

 jQuery基本语法

    语法：$(选择器).方法();

        $(document).ready(function(){

         // jQuery代码块

        });

  给document对象绑定"文档就绪事件"，也就说当文档加载完成时要执行的操作可以简写为：$(function(){ //jQuery代码块 });

案例

本段代码为：

       文档加载完毕后，运用选择器选择<p>标签；绑定一个鼠标单击事件，当鼠标点击后当前选中块执行hide（）方法。

jQuery常用选择器

三大类 1.标签选择器 2.Id选择器 3.类选择器

常用过滤选择器

过滤选择器 :not(selector) 选取去除所有与给定选择器匹配的元素

过滤选择器 :even 选取索引是偶数的所有元素（index从0开始）

过滤选择器 :odd 选取索引是奇数的所有元素（index从0开始）

过滤选择器 :eq(index) 选取索引等于index的元素（index从0开始）

表单选择器 :input 匹配所有input、textarea、select和button 元素

表单选择器 :text 匹配所有单行文本框 $("#myform :text")

常用方法

addClass(string) 添加类名

removeClass(string) 移除类名

hasClass(string) 检查是否存在类，如果存在返回true

css(string,string) 设置单个css属性  $(this).css("background-color","#F00");

css({string:string,string:string})    设置多个CSS属性

$(this).css({"padding":"10px","margin":"10px"});

事件相关方法

ready(function) 加载就绪事件

click(function) 单击鼠标时

mouseover(function) 鼠标指针移过时

mouseout(function) 鼠标指针移出时

mouseenter(function) 鼠标指针进入时

mouseleave(function) 鼠标指针离开时

keydown(function) 按下键盘时

keyup(function) 释放按键时

keypress(function) 产生可打印的字符时

blur(function) 从文本域中移开焦点

focus(function) 在文本域中设置焦点，即获得鼠标光标

select(function) 选取文本域中的内容，突出显示输入区域的内容

复合事件方法

hover()

语法：hover(mouseover,mouseout);

描述：相当于mouseover与mouseout事件的组合

$(".top-m .on").hover(

    function(){

        $(".topDown").show();

    },

    function(){

        $(".topDown").hide();

    }

);

toggle()

语法：toggle(fn1,fn2,...,fnN);

描述：用于模拟鼠标连续click事件，本事件可能存在版本兼容问题

    $("input").toggle(

        function(){$("body").css("background","#ff0000");},

        function(){$("body").css("background","#00ff00");},

        function(){$("body").css("background","#0000ff");}

    );

语法：toggle();

描述：与show( )和hide( )方法作用一样

    $("input").click(function(){$("p").toggle();})

    toggleClass()

语法：toggleClass(class属性值);

描述：与addClass()和removeClass()方法作用

    $("input").click(function(){$("p").toggleClass("red");})

    bind()

描述：绑定事件

语法一：bind(事件类型,[可选参数],处理函数);

    $(".on").bind("mouseover",function(){

     $(".topDown").show();

    });

语法二：bind({事件类型:操作函数,事件类型:操作函数,...});

$(".on").bind({

mouseover:function(){

$(".topDown").show();

},

mouseout:function(){

$(".topDown").hide();

}

});