JQuery的一些操作

jQuery语法

   基础语法:$(selector).action() ; 

    工厂函数$():将DOM对象转化为jQuery对象

    选择器selector:获取需要操作的DOM 元素

    方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

  jQuery 入口函数:

    (1)搭建

        <scriptsrc="js/jquery-1.12.4.js"type="text/javascript"></script>

    (2)执行

          $(document).ready(function(){

            // 执行代码});或者

         $(function(){

            // 执行代码});

基础方法

1.操作页面元素的方法

     元素添加样式:

    Query对象.addClass([样式名]);

     设置元素样式

    css("属性","属性值") ;//一个css

    css({"属性1":"属性值1","属性2":"属性值2"...}) ;//对个css

    设置元素的显示和隐藏

        $(selector).show( );

        $(selector).hide( );


jQuery对象

使用jQuery来获取元素对象: $(“#title”).html( ); 等同于  document.getElementById("title").innerHTML;


DOM对象转化成jQuery对象

使用$()函数进行转化:

var txtName =document.getElementById("txtName");

var $txtName =$(txtName);  

在事件中经常使用$(this),this是触发该事件的对象

 

jQuery对象转DOM对象

jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象

         var $txtName =$ ("#txtName");

var txtName =$txtName[0];

通过get(index)方法得到相应的DOM对象    

var $txtName =$("#txtName");

var txtName =$txtName.get(0);  

选择器获取元素

了解:

jQuery选择器类似于CSS选择器,用来选取网页中的元素

分类:

基本选择器

标签选择器element

类选择器     .class

ID选择器     #id

并集选择器

selector1,selector2,...,selectorN

全局选择器    *

层次选择器

后代选择器ancestor descendant

         $(".textRight p").css("color","red");

子选择器parent>child

      $(".textRight>p").css("color","red");

相邻元素选择器prev+next

       $("h1+p").css(text-decoration","underline");

同辈元素选择器prev~sibings

        $("h1~p").css("text-decoration","underline");

属性选择器

    选取给定属性是以某些特定值开始的元素[attribute^=value]

    选取给定属性是以某些特定值结尾的元素  [attribute$=value]

    选取给定属性是以包含某些值的元素      [attribute*=value]

1.根据属性名获取元素

属性选择器可以根据是否包含某属性来选取元素

a标签带有class属性

        $("#news a[class]").css("background","#c9cbcb");

2.根据属性值获取元素

    属性选择器可以根据属性的值来选取元素

    class属性值为hot

       $("#news a[class='hot']").css("background","#c9cbcb");

    属性选择器可以指定选取不等于属性是某个特定值的元素

    class值不等于hot

    $("#news a[class!='hot']").css("background","#c9cbcb");

    根据属性值包含特定的值获取元素

    属性选择器可以指定属性值以指定值开头的元素

     A标签href属性值以www开头

     $("#news a[href^='www']").css("background","#c9cbcb");


属性选择器可以指定属性值以指定值结尾的元素

      a标签href属性值以html结尾

      $("#news a[href$='html']"). css("background","#c9cbcb");


属性选择器可以指定属性值包含指定值的元素

a标签href属性值包含“k2”的元素

    $("#news a[href*='k2']").css("background","#c9cbcb");

过滤选择器

1.定义:通过特定的过滤规则来筛选出所需的元素

分类:

基本过滤选择器

:eq(index)选取索引等于index的元素(index从0开始

:gt(index)选取索引大于index的元素(index从0开始

:lt(index)选取索引小于index的元素(index从0开始

:header选取所有标题元素,如h1~h6

:focus选取当前获取焦点的元素

:animated 选择所有动画


可见性过滤选择器

:visible选取所有可见的元素

$("p:hidden").show();


:hidden选取所有隐藏的元素

$("p:visible").hide();

常用事件分类

鼠标事件

        鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

        click( ) :$(selector).click(function)

       mouseover( ):$(selector).mousemove(function)

       mouseout( ):$(selector).mouseout(function)

       mouseenter( ):$(selector).mouseenter(function)

       mouseleave( ):$(selector).mouseleave(function)

键盘事件

        用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件

                keydown( ):$(selector).keydown(function)

                keyup( ):$(selector).keyup(function)

                keypress( ):$(selector).keypress(function)

浏览器事件

调整窗口大小时,完成页面特效

        $(selector).resize( );

移除事件

                $(selector).unbind(event,function)

                参数:event

                        可选。规定删除元素的一个或多个事件

                        由空格分隔多个事件值。

                        如果只规定了该参数,则会删除绑定到指定事件的所有函数。

Function

            可选。规定从元素的指定事件取消绑定的函数名。

复合事件

hover( )方法

        相当于mouseover与mouseout事件的组合

        hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数

        mouseover与mouseout,如果只指定一个函数,则mouseenter和 mouseleave 都执行它

        hover(enter,leave);

toggle( )方法

        切换元素的可见状态。

        toggle( fn1,fn2...)实现单击事件的切换,无须额外绑定click事件

        $(selector).toggle(speed,callback,switch)

Speed

规定元素从可见到隐藏的速度(或者相反)。默认为"0"。

可能的值:

            毫秒(比如1500)

            "slow"

            "normal"

            "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用switch参数。

Callback 当动画100% 完成后,即调用 Callback 函数,除非设置了speed 参数,否则不能设置该参数。

Switch,布尔值,规定toggle是否隐藏或显示所有被选元素。

            True -显示所有元素

            False -隐藏所有元素

toggleClass()

    class

        对设置或移除被选元素的一个或多个类进行切换。

        必需。规定添加或移除class的指定元素。

        如需规定若干class,请使用空格来分隔类名。

        Switch  可选。布尔值。规定是否添加或移除class。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,101评论 0 3
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,853评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,206评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 4,902评论 0 1
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,810评论 0 44