• jquery学习笔记


    学而时习之,不亦说乎;从头整理一遍jquery学习知识点;

    一、引用:

    自己下载jquery文件引用:

    <srctip src="XXX/jquery.js"></script> 

    使用其他网站的CDN:

    如google:

    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
    /jquery/1.4.0/jquery.min.js"></script>
    </head> 

    在HTML5中 已经默认javascript是所有浏览器的脚本语言  多以不必在script标签里写 type="text/script"

    二、初次使用:

    在js中写jquery:

    文档加载完毕后才执行的jq:注意原始必须的代码,js代码写于function函数内;

    $(document).ready(function(){
    
    //js内容
    
    });
    

        如果文档没有完全加载之前就执行函数,某些操作可能会失败(如选择器所选择的元素为找到);

     添加事件方法(以click()方法为例):

    $("div").click(function(){
    //事件内容
    });
    

      

    三、jQuery 语法

    基础语法是:$(selector).action()                  //$选择器选择selector  执行action()方法;

    $(this).hide();  //隐藏当前元素

    $("p").hide();  //隐藏所有段落

    。。。。。。

    四、jquery选择器:

        通过jQuery选择器来精确的找到所要操作的元素(类似于css选择器);

    JQuery可以通过元素的标签、属性、内容对HTMl元素进行选择;

    1、元素选择器:

    jQuery使用css选择器来选取HTML元素;

        $("p.intro")  选取所有class=“intro”的p元素    

    2、属性选择器:

    jQuery使用XPath表达式来选择带有给定属性的元素:

    $("[href]") 选取所有带有href属性的元素;

    $("[href='#']") 选取所有带有href切值为“#”的元素

    $("[href!='#']") 选取所有带有href且值不等于“#”的元素

    $("[href$='.jpg']") 选择所有带有href且值以.jpg结尾的元素

    3、Css选择器:

    $("P").css("backgeound-color","red");

    4、其他选择器:

    $(this)    当前HTML元素  

    $("p")    标签选择器

    $("p.intro")    calss等于intro的p元素

    $("#intro")     id选择器

    $("ul li:first")    ul  下的第一个li

    $("div#intro .head")   id=intro的div下所有class=head的 元素 

    五、jQuery事件

      1、jQuery 名称冲突

    jQuery 使用 $ 符号作为 jQuery 的简介方式。

    某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

    jQuery 使用名为 noConflict() 的方法来解决该问题。

    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

    Event 函数绑定函数至
    $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

    更多事件请参考jQuery手册;

  • 相关阅读:
    selenium webdriver 执行Javascript
    selenium webdriver 定位元素 第一部分
    selenium webdriver 模拟鼠标悬浮
    JaveWeb 公司项目(3)----- 通过Thrift端口获取数据库数据
    JaveWeb 公司项目(2)----- 类模态窗口显示DIV并将DIV放置在屏幕正中间
    JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果
    Intellij Idea修改css文件即时更新生成效果
    Intellij idea 2017 图标含义
    下载安装tomcat和jdk,配置运行环境,与Intellij idea 2017关联
    IntelliJ IDEA Tomcat中端口被占用的问题
  • 原文地址:https://www.cnblogs.com/zhuyucun/p/6272238.html
Copyright © 2020-2023  润新知