zoukankan      html  css  js  c++  java
  • w3school---jQuery 教程学习笔记

    http://www.w3school.com.cn/jquery/index.asp

    jQuery 是一个 JavaScript 函数库。 极大地简化了 JavaScript 编程。很容易学习。jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

    jQuery 库包含以下特性:

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • Utilities

    由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

    • 把所有 jQuery 代码置于事件处理函数中
    • 把所有事件处理函数置于文档就绪事件处理器中
    • 把 jQuery 代码置于单独的 .js 文件中
    • 如果存在名称冲突,则重命名 jQuery 库

    添加jQuery,请注意,<script> 标签应该位于页面的 <head> 部分。

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

    jQuery 选择器

    $(this).hide()演示 jQuery hide() 函数,隐藏当前的 HTML 元素。$("#test").hide()演示 jQuery hide() 函数,隐藏 id="test" 的元素。$("p").hide()演示 jQuery hide() 函数,隐藏所有 <p> 元素。$(".test").hide()演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

    jQuery 语法是为 HTML 元素的选取编制的,基础语法是:$(selector).action()

    $(document).ready(function(){});这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

    jQuery 元素选择器

    jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p") 选取 <p> 元素。

    $("p.intro") 选取所有 class="intro" 的 <p> 元素。

    $("p#demo") 选取所有 id="demo" 的 <p> 元素。

    $(".intro")  所有 class="intro" 的元素

    $("ul li:first") 每个 <ul> 的第一个 <li> 元素

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

    jQuery 属性选择器

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

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

    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

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

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

    jQuery CSS 选择器

    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

    $("p").css("background-color","red");

     Query 名称冲突 

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

    jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

    下面是 jQuery 中事件方法的一些例子:

    Event 函数绑定函数至
    $(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
    $(selector).click(function) 触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
  • 相关阅读:
    springboot使用mybatis-plus表单更新null值问题通用解决方案
    ASP.NET MVC快速开发框架FastExecutor开发全过程感受及总结
    NetCore实现Transitional自定义注解事物
    NetCore3.0实现自定义IOC容器注入
    ADO.NET事务封装
    ASP.NET MVC模块化开发——动态挂载外部项目
    后台管理tab栏滑动解决方案
    c#使用CefSharp开发winform——环境搭建
    c#通过Redis实现轻量级消息组件
    ASP.NET MVC实现依赖注入
  • 原文地址:https://www.cnblogs.com/zmxie/p/3708105.html
Copyright © 2011-2022 走看看