zoukankan      html  css  js  c++  java
  • 初始JQuery

    JQuery语法结构

    JQuery语句主要包含三大部分:$(),doucment和ready().

    这三大部分在JQuery中分别被称为工厂函数,选择器和方法。

    $()=JQuery()

    当$()的参数是DOM对象时,该对象不需要使用双引号包裹起来,如果获取的是doucment对象,则写作$(doucment).

     $(function () {
                $("li").mousemove(function () {
                    $(this).css("background","red");
                }).mouseout(function () {
                    $(this).css("background","");
                })
            })
    自动迭代

    DOM对象和JQuery对象转换

    //onload = function () {
            //    var $dom = $("#myid");
            //    var dom = $dom[0];
            //    dom.onclick = function () {
            //        if(dom.checked==true){
            //            alert("成功");
            //        }
            //    }
            //}

    可以将DOM对象转换成JQuery对象,以使用JQuery提供的丰富功能,也可以将JQuery对象转换成DOM对象,使用DOM对象特有的成员提供的功能。

    JQuery选择器

    基本选择器

    主要包括:标签选择器,类选择器,ID选择器,并集选择器,交集选择器和全局选择器。

    $("p").click(function(){

      $("span").css(”background“,"#FF6")

    });

    层次选择器:

    后代选择器,子选择器,相邻选择器,和同辈选择器。

    $("h2").click(function(){

      $("#menu span").css(”background“,"#FF6");

    });

    单击h2元素时,为#menu下的span元素添加色为#FF6的背景颜色的功能

    $("h2").click(function(){

      $("body span").css(”background“,"#FF6");

    $("body>span").css(”background“,"#FF7");

    });

    属性选择器

    $("h2").click(function(){

      $("h2[title]").css(”background“,"#FF6");

    });

    单击h2元素时,为包含属性名为title的h2元素添加颜色为#FF6的背景颜色的功能。

    基本过滤选择器

    :first 选取第一个元素

    :last 选取最后一个元素

    :even选取索引是偶数的所有元素(index从0开始)

    :odd选取索引是奇数的所有元素(index从0开始)

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

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

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

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

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

    $("tr:even").css("background-color","#F63");

     可见性过滤选择器

    :visible 选取所有可见的元素

    :hidden 选取所有隐藏的元素

     $(function () {
                $("p").click(function() {
                    $("p:hidden").show();
                    $("p:visible").hide();
                    $("li:even").css("background-color", "#CCC");
                    $(".s").css("background-color", "#FF99CC");
                })  
            })
    可见性过滤选择器
  • 相关阅读:
    冲刺阶段站立会议每日任务3
    冲刺阶段站立会议每日任务2
    典型场景描述
    冲刺阶段站立会议每天任务1
    第七周学习进度
    第六周学习进度
    四则运算网页版
    团队项目简介(1000字)
    返回一个二维整数数组中最大联通子数组的和
    本周学习进度
  • 原文地址:https://www.cnblogs.com/s1294/p/5513230.html
Copyright © 2011-2022 走看看