jQuery入门

最新推荐文章于 2022-05-16 11:19:47 发布
最新推荐文章于 2022-05-16 11:19:47 发布
阅读量246 收藏
点赞数
分类专栏： JavaScript 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cckevincyh/article/details/53148855
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
  </head>
  <body>
       <input type="text" value="zhang" id="username" name="username" />
  </body>
  <script language="JavaScript">
    //测试
    //使用document输出
//  var username = document.getElementById("username");
//  
//  alert(username.value);

    //使用JQuery输出
    /*
     * jquery对象：需要用"$"来修饰
     * 
     * jquery获取页面标签：$()来包裹，通过"#id"来获取
     * 
     */
    var $username = $("#username");//document.getElementById("username");
    alert($username.val()); username.value

  </script>
</html>

dom转化为JQUery对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
  </head>

  <body>
     <input type="text" value="zhang" id="username" name="username" />

  </body>
  <script language="JavaScript">
  //dom转化为JQUery对象  $(DOM对象)

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

  var $username = $(username);
  alert($username.val());
  </script>
</html>

JQUERY对象转化为DOM对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
  </head>

  <body>
     <input type="text" value="zhangxx" id="username" name="username" />
     <input type="text" value="zhangsanfeng" id="username1" name="username" />
  </body>
  <script language="JavaScript">
   //JQUERY对象转化为DOM对象
      //方法一：jquery对象是一个数组对象，获取利用索引值进行转换成DOM对象
      var $username = $("#username");

//    var username = $username[0];
//    
//    alert(username.value);

      //方法二：在jquery中，提供了一个get(index)方法，get()中传入索引值，来进行转换成DOM对象

       var username = $username.get(0);
       alert(username.value);
  </script>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
  </head>

  <body>
     <input type="text" value="zhang" id="username1" name="username1" />
     <input type="text" value="88888" id="psw" name="psw" />
  </body>
  <script language="JavaScript">
            //dom，提示：缺少对象，需要手动判断 
//      var username = document.getElementById("username");
//      if(!username){
//          alert("id不存在");
//      }else{
//          alert(username.value);
//      }

        //jquery，有相对完善的对事件处理的机制
        var $username = $("#username111");

        alert($username.val());

  </script>
</html>
c.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery入门学习
棉花糖老丫
04-25 636
jQuery是一个优秀的Javascript库。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。
JQuery入门
云飞扬°的博客
05-17 988
JQuery入门 什么JQuery: jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文...
jQuery入门2
08-09
### jQuery入门2知识点详解 #### 一、课程概述 本课程为**jQuery入门2**，主要面向零基础的初学者，旨在通过详细易懂的教学帮助学员掌握jQuery的基础使用及一些高级功能。通过本课程的学习，学员能够理解并运用...
jQuery 入门讲解1
10-30
本文将深入讲解jQuery的入门知识，包括其优点、构造函数以及一些基本的DOM操作方法。 首先，jQuery 的优点是多方面的。它的体积小巧，例如，版本1.2.3只有15kb，这使得它在网页加载速度方面表现优秀。jQuery 提供了...
Jquery Ajax设置withCredentials解决跨域请求
热门推荐
C.
07-21 3万+
后端代码：  httpResponse.setHeader("Access-Control-Allow-Origin", httpServletRequest.getHeader("Origin")); httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With...
JavaScript获取select元素下的每一个option
C.
11-10 1万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>form.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="d
jQuery过滤选择器——属性过滤选择器
C.
11-13 6836
属性过滤选择器属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 1、[attribute] 用法: $(”div[id]“) ; 返回值：集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签. 2、[attribute=value] 用法: $(”input[name='newsletter']“).attr(”checke
ajaxFileUpload 异步上传文件配合Struts2的简单使用
C.
04-16 5780
我在用SSH框架写一个简单的企业网站的时候需要对产品的图片进行异步上传，经过研究成功实现了ajaxFileUpload+Struts2的异步上传功能，所以抽空做下总结，本文主要讲解ajaxFileUpload 异步上传文件配合Struts2的简单使用 jQuery插件ajaxFileUpload可以实现ajax文件上传，使用非常简单。 准备环境 所需环境： jquery.js aja
jQuery过滤选择器——子元素过滤选择器
C.
11-13 4855
子元素过滤选择器1、:nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 :集合元素 说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始. 2、:first-child
ajaxFileUpload 异步上传文件配合PHP的使用
C.
04-17 4706
本人最近在学习PHP，并在用PHP写一个简单的个人博客网站的时候需要对个人的头像进行异步上传，经过研究，成功实现了ajaxFileUpload+PHP的异步上传功能，所以抽空做下总结，本文主要讲解ajaxFileUpload 异步上传文件配合PHP使用 jQuery插件ajaxFileUpload可以实现ajax文件上传，使用非常简单。 准备环境 jquery.js ajaxfileu
ajaxFileUpload ：jQuery.handleError is not a function的解决方法
C.
04-17 4308
jQuery.handleError is not a function 报错原因是： handlerError只在jquery-1.4.2之前的版本中存在，jquery-1.4.2之后的版本中都没有这个函数了。 解决方法:将下面的代码复制进去ajaxFileUpload .js中。handleError: function( s, xhr, status, e ) {
jQuery过滤选择器——表单对象属性过滤选择器
C.
11-13 2977
表单对象属性过滤选择器此选择器主要对所选择的表单元素进行过滤 1、:enabled 用法: $(”input:enabled”) 返回值 :集合元素 说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦. 2、:disabled 用法: $(”input:disabl
ajax post方式与服务器建立连接
C.
11-11 2369
<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="./test.js"></script> </head>
如何中断Promise的链式调用？
C.
05-16 2003
文章目录如何中断Promise的链式调用？ 如何中断Promise的链式调用？ 问题：当promise状态改变时,他的链式调用都会生效,那如果我们有这个一个实际需求:我们有5个then(),但其中有条件判断,如当我符合或者不符合第三个then条件时,要直接中断链式调用,不再走下面的then,该如何操作？ 我们知道Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），当状态从pending（进行中）变成fulfilled（已成功）或者rejected（已
浅谈JS和CSS是如何阻塞DOM
C.
07-31 1618
文章目录后端ExpressCSS 阻塞页面渲染CSS 不会阻塞 DOM 的解析什么是DOMContentLoaded？DOMContentLoaded什么时候触发？defer 与 DOMContentLoadedasync 与 DOMContentLoaded浏览器渲染原理CSS 阻止JS执行JS 阻塞 DOM 解析浏览器遇到 script标签时，会触发页面渲染总结参考 后端Express 后端N...
从零开始的jQuery入门教程
"这是一份详尽的jQuery入门教程，旨在引导初学者逐步掌握jQuery的核心概念和常见用法。教程由一系列文章组成，包括从基础到高级的各种主题，如选择器、DOM操作、事件处理、Ajax、动画效果以及jQuery UI的实战应用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值