zoukankan      html  css  js  c++  java
  • jquery用法初探

    JQuery选择器

    JQuery选择器用于查找满足条件的元素,比如可以用$(#控件Id)来根据控件id获得控件的jQuery对象,相当于getElementById

    1id 选择器   $(#div1).html(<font color=red>hello</font>)。语法、意义类似于CSS选择器

    2、标签选择器 $("TagName")来获取所有指定标签名的jQuery对象,相

           当于getElementsByTagName

            $(function() {

                $("#btnClick").click(function() {

                    $("p").html("我们都是P");

                });

            });

    3、类选择器

    JQuery中注册事件监听的写法:click()leave()focus()blur...,自己动手写click函数。

    规则: $(who).when({what});      例: $(#a).click(function(){});

    4、复合选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素(类似于CSS选择器)

    /5、层次选择器:

    1$("div p")获取div下的所有p元素(后代,子、子的子……)

    2$("div > p")获取div下的直接p子元素

    3$(".menuitem + div")获取样式名为menuitem之后的第一个div元素(不常用)

    4$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用)

    JQuery中,js里面的几乎所有属性和事件都变成了方法,如果在方法中没写任何参数那表示是获取,写了就是设置

    如果需要判断指定的id是否存在,应该写:

    if ($("#btn1").length <= 0) {

                    alert("idbtn1的元素不存在!");

                }

    节点遍历

    next()方法用于获取节点之后的挨着的第一个同辈元素,$(".menuitem").next("div")nextAll()方法用于获取节点之后的所有同辈元素,$(".menuitem").nextAll("div")

    prevprevAll兄弟中之前的元素。

    siblings()方法用于获取所有同辈元素,$(".menuitem").siblings("li")siblingsnext等所有能传递选择器的地方能够使用的语法都和$()语法一样。

    end()将匹配的元素列表变为前一次的状态。

    andSelf()加入先前所选的加入当前元素中

    案例:横向菜单,选中的项高亮显示 $(this).css();$(this).siblings().css()

    案例:评分控件。prevAll,this,nextAll

    简单选择器

    :first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");

    :last 选取最后一个元素。$("div:last")选取最后一个<div>

    :not(选择器选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass<input>

    :even:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>

    :eq(索引序号):gt(索引序号):lt(索引序号选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5<input>

    $(":header")选取所有的h1……h6元素(*

    $("div:animated")选取正在执行动画的<div>元素。 (*

    样式操作

    获取样式 attr("class"),设置样式attr("class","myclass")

    追加样式addClass("myclass")(不影响其他样式)

    移除样式removeClass("myclass")

    切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),判断是否存在样式:hasClass("myclass")

    案例:网页开关灯的效果。background

    练习:给body设置body{ filter:Gray; } 这个style就可以让网页变为黑白显示,做切换黑白效果的按钮。

    点击表格行,被点击的行高亮显示(背景是黄色),其他行白色背景。监听每个trclick事件,将点击的背景设置为黄色,其他的设置为白色背景。颜色定义为class样式。

  • 相关阅读:
    【BZOJ-3627】路径规划 分层图 + Dijkstra + spfa
    Codeforces 刷水记录
    【POJ-1390】Blocks 区间DP
    【BZOJ-1656】The Grove 树木 BFS + 射线法
    【BZOJ-1127】KUP 悬线法 + 贪心
    【BZOJ-3881】Divljak AC自动机fail树 + 树链剖分+ 树状数组 + DFS序
    【BZOJ-1570】BlueMary的旅行 分层建图 + 最大流
    【BZOJ-2325】道馆之战 树链剖分 + 线段树
    Codeforces乱刷集合
    【Codeforces710F】String Set Queries (强制在线)AC自动机 + 二进制分组
  • 原文地址:https://www.cnblogs.com/zhendiao/p/4352820.html
Copyright © 2011-2022 走看看