JQuery基础语法小结

1、$(document)将document对象转换为jquery

代码如下:

$(document).ready(function(){
    alert("hello world");
});

2、获取所有的超链接对象，并且增加onclick事件；其实在底层jquery对象获得的每个标签的数组，因此我们不需要进行循环了

代码如下:

$(document).ready(function(){
    $("a").click(function(){
        alert("hello world");
    });
});

3、jquery对象与dom对象之间的转换

代码如下:

$(document).ready(function(){
    var javascriptElement = document.getElementById("clickme");
    //将dom对象转换为jquery对象
    var jqueryElement = $(javascriptElement);
    //alert("javascript:" + javascriptElement.innerHTML);//innerHTML获取标签的内容
    //alert("jquery:" + jqueryElement.html());
    //将jquery转换为dom对象方式一
    var jElement = $("#clickme");
    var javascriptEle = jElement[0];
    alert("jquery1: " + javascriptEle.innerHTML);
    //方式二
    var javascriptEle2 = jElement.get(0);
    alert("jquery2: " + javascriptEle2.innerHTML);
});

4、jquery解决id值是否存在的问题

代码如下:

<a id="hello">click me</a>
<script type="text/javascript">
    //以传统方式解决id为空方式一
    if(document.getElementById("helllo")) {
        //如果hello不存在会出错
        document.getElementById("helllo").style.color ="red";
    }
    //方式二
    //$("#hello")[0].style.color="red";
    //用jquery解决
    $("#hello").css("color","red");
    //如果只有一个参数，则此方法是读，如果是两个参数则是些功能（css（“”），css（“”，“”））
    alert($("#hello").css("color"));
</script>

5、在javascript中规定，你要操作css属性时要将属性中的‘-'去掉，同时把后一个字母大写；如：background-color 要改成 backgroundColor

6、jquery中也使用选择器来操纵各种各样的元素。是继承了css的设计理念，但是把它更是发扬光大了；

7、jquery的几种书写形式

1> 方式一

代码如下:

$("document").ready(function(){
    ...
});

2> 方式二

代码如下:

$().ready(function(){
    ...
});

3> 方式三

代码如下:

$(function(){
    ...
});

以上几种方式是一样的

希望本文所述对大家学习jquery程序设计能有所帮助。

赞 (0)

相关推荐

  • jQuery入门基础知识学习指南

    打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document

  • jQuery入门介绍之基础知识

    jQuery入门介绍之基础知识

    JavaScript 库作用及对比 为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器 当前流行的JavaScript 库有: jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作

  • JQuery中基础过滤选择器用法实例分析

    本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • jQuery 文本框得失焦点的简单实例

    版本一 css代码部分: 复制代码 代码如下: .focus {      border: 1px solid #f00;     background: #fcc;} 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: <body>    <form action="" method="post" id="regForm">        <fieldset&

  • jQuery基础知识小结

    1.基础 jquery对象集:   $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素:     $('img[alt]').eq(0)     $('img[alt

  • jQuery实现动态表单验证时文本框抖动效果完整实例

    jQuery实现动态表单验证时文本框抖动效果完整实例

    本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes

  • jQuery基础语法实例入门

    本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码 代码如下: $("di

  • JQuery入门基础小实例(1)

    JQuery入门基础小实例(1)

    先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <

  • jquery基础教程之数组使用详解

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍jQuery对象的$().each()方法,此方法可用于例遍任何对象.回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出each循环可使回调函数返回false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代码 代码如下: var _mozi=

  • jQuery实用基础超详细介绍

    jQuery实用基础超详细介绍

    一.jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库jQuery 理念: 写得少, 做得多. 优势如下:轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax出色的浏览器兼容性链式操作方式-- 第一个案例 二.jQuery 对象 jQuery 对象就是通过 jQuery ($()) 包装 DOM 对象后产生的对象jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQu

  • ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

    ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

    •可限制最大输入字符长度 •可设置字符截取速度 •可自定义提示信息文本样式(可以改进自定义文本内容) 该插件统计英文字符和中文的长度是一样的. 废话少说,这里直接奉上详细插件代码,具体实现细节已经在代码里面有注释: 复制代码 代码如下: ; (function ($) { $.fn.extend({ textAreaCount: function (options) { var $textArea = this; options = $.extend({ maxlength: 140, // 定

  • Jquery基础教程之DOM操作

    Jquery基础教程之DOM操作

    对于dom的全称大家都知道吧,DOM是Document Object Model的缩写,其意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用dom接口很容易的访问页面中所有标准组件.dom操作一般可以分为三个方面即DOM Core(核心).HTM-Dom和CSS-DOM. 每一个网页都可以用DOM表示出来,每个DOM都可以看作是一棵DOM树.下面的html页面结构可以构建出一棵DOM树,代码: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • JQuery中使文本框获得焦点的方法实例分析

    本文实例分析了JQuery中使文本框获得焦点的方法.分享给大家供大家参考.具体分析如下: 由于JQuery中获得的对象还是JQuery对象,对其使用focus()只是使该对象获得onFocus()函数,不能是对象获得焦点,所以要使对象获得焦点,应该调用DOM对象的focus 方法,即: $("#id")[0].focus(); 需要注意两个函数之间的区别: $("#id").focus(); $("#id")[0].focus(); 第一个是增加

随机推荐