jQuery 是 JavaScript 的一个函数库。方便、主流
 
jQuery的开发步骤：
（1） 导入jQuery 库
 
（2）  在
<script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script>
<script> 
        $(function(){
                    写jQuery代码；
         });
</script>
 
（3）jQuery对象   vs     DOM对象
1.jQuery对象   和  DOM对象   不可混用，不能使用另一方的属性和方法
 
2.jQuery对象  是一个  DOM数组对象。所以可以用 下标的方式  转为  DOM对象
var $btn = $("button");
var btn = $btn[0];
3.jQuery对象  使用  $()  包装  DOM对象后  产生的对象
 
例：进行遍历的时候（jQuery对象 遍历的方式使用 each，在each 内部的 this 是正在得到的 DOM 对象，而不是一个 jQuery对象。 ）
$("select : seclected").each(function(){
//alert(this.value);    如果想用jQuery的属性和方法，用$()  包装起来。
alert($(this).value);
});
（4）jQuery 选择器（综合使用，威力巨大）
选取被选中的 select 的option 需要使用 选取子节点的方式
$("select[name="test"] :selected").each(function(){   //注意绿色和橘色之间是有空格（黄色）的
//jq代码
});
 
选择器搞不定，可以借助方法
 
（5）jQuery对象的方法
 
 
 
 
 
一、格式：$(selector).action();
        $ : jQuery的缩写
        selector: 选择器
        action(): 对元素的操作
 
<script> 
     $(document).ready(function(){
          alert("jQuery代码");
     });
</script>
 
二、获取元素的值和修改元素的内容
<script>
   $(document).ready(function(){
/*
* 获取元素的值（不带参）
* */
//js
var jsValue = document.getElementById('first').innerHTML;
var jsValue1 = document.getElementById('first').innerText;

//jq
var jQValue = $('#first').html();
var jQValue1 = $('#first').text();
 
 
/*
 * 设置元素的内容（带参）
 * */
//js
 document.getElementById('first').innerHTML = '修改内容';
      document.getElementById('first').innerHTML = '<h2>添加的h2标签</h2>';

//jq
 $('#first').html('修改内容');
 $('#first').html('<h2>添加的h2标签</h2>');
   });
</script>
 
 
三、onload和ready的对比
 
jq:  文档就绪函数，为了防止文档在完全加载（就绪）之前运行jQuery代码
  $(document).ready(function(){
        //jq代码；
   });
 
js:
  window.onload = function(){
     //js代码
 }
 
区别（面试可能会问）：
 
1、加载时间不同。
        ready：只要页面的DOM加载完成就可以完成。
        onload：包括页面所有资源（图片、js、dom树等）加载完成之后执行。
2、编写的个数不同。
         onload：只能写一个，执行一次，后面会覆盖前面，以最后一个为准。
         ready：可以同时编写多个，并且每个都可以得到执行。
3、简写形式。
          onload：没有简写形式。
          $(document).ready()：等价于 $(function(){})
 
 
ps:
有一个大型的图库网站，为网页中所有图片添加某些行为，例如单击图片后让它隐藏或显示。
如果使用window.onload方法来处理，那么用户必须等到每一幅图片都加载完毕后，才可以进行操作。
如果使用jQuery中的$(document).ready()方法来进行设置，只要DOM就绪时就可以操作了，不需要等待所有图片下载完毕
 
例：
<script>
    
//1. js(只能写一个)
window.onload = function(){
    alert(1);
}
window.onload = function(){
    alert(2);
}
window.onload = function(){
    alert(3);
}
 
//2.jq（可以写多个）
$(document).ready(function(){
    alert(4);
});
$(document).ready(function(){
    alert(5);
});
$(document).ready(function(){
    alert(6);
});

$(function(){
    alert(7)
});
</script>
 
 
四、jQuery对象(jq对象是个数组)
 
         1. $ == jQuery   console.log(jQuery);    console.log($); 一样结果 
             例：
console.log(jQuery);
console.log($);
var jqObj = $('p');
var jqObj = jQuery('p');
 
         2.  js 和 jq  对象的相互转化
            注:  原生js代码不能和jQuery混合使用
              原生DOM对象是可以和jQuery对象互相转变的
           例：
//        先获取
        var jqObj = $('p');
        var jsObj = document.getElementById('two');   //如果是集合的话不能转，集合里的对象可以转
        
//        再转换
        var newjqObj = $('jsObj');     //原生DOM对象 转变为 jQuery对象   使用 $() 进行包装 
        var newjsObj = jqObj.get(0);   //jQuery对象 转变为 原生DOM对象    通过数组的下标
//        输出
        console.log("-----------"+jqObj);
        console.log("-----------"+jsObj);

        console.log("-----------"+newjqObj);
        console.log("-----------"+newjsObj);
 
         3.  放弃$，避免多库冲突   
    
    可以重新赋个值，$$ 就相当于 jQuery 
var $$ = jQuery.noConflict();
var jqObj = $$('p');
例： 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery对象的转换</title>
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p id="p4">段落4</p>
</body>
<script>
    console.log(jQuery);
    var $$ = jQuery.noConflict();

    var jqObj = $$('p');
    var jsObj = document.getElementById('p4');

    var newjqObj = $$(jsObj);
    var newjsObj = jqObj.get(0);

    console.log("------------"+jqObj);
    console.log("------------"+jsObj);

    console.log("------------"+newjqObj);
    console.log("------------"+newjsObj);

    /*
    *   $ == jQuery
    *
    * */

    /*
    *   总结：
    *       1. 原生js代码不能和jQuery混合使用
    *       2. 原生DOM对象是可以和jQuery对象相互转变的。
    * */
   $(function(){

        /*
        *   1.jQuery对象转变为原生DOM对象
        * */
        var con = $('p').get(1).innerHTML;
        console.log(con)

        /*
        *   2.原生DOM对象转变为jQuery对象
        * */
        var con4 = document.getElementById('p4');
        console.log($(con4).html());
    });
</script>
</html>
 
 
 
 

jQuery基本语法的更多相关文章

  1. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  2. js进阶 10-2 JQuery基础语法是什么

    js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...

  3. 前端之JQuery：JQuery基本语法

    jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...

  4. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  5. JQuery基本语法（部分）

    1.jQuery介绍 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScrip ...

  6. jquery基本语法（一）

    https://www.cnblogs.com/haiyan123/p/7657151.html 一.jQuery基础1.为什么要用jquery?    写起来简单,省事,开发效率高,兼容性好2.什么 ...

  7. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

  8. <学习笔记 之 JQuery 基础语法>

    jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...

  9. jQuery 选择器语法

    jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId&quo ...

随机推荐

  1. 破解Google Gmail的https新思路

    最近,Google针对gmail被攻击事件,全面默认启用了始终以https访问Gmail的方式了.但是,对于可以动用整个国家力量的黑客来说,从网络通讯数据中(在此不讨论对用户电脑种木马破解https的 ...

  2. asp.net实现IHttpModule接口注意事项

    IHttpModule向实现类提供模块初始化和处置事件. IHttpModule包含兩個方法: public void Init(HttpApplication context);public voi ...

  3. 《Pro Express.js》学习笔记——概述

    要学Node.js,先学Express.js. Express.js是Node.js官方推荐的基础框架. Express.js框架经过一系列的发展,已经到了4.x版本.新的版本解决了3.x之前版本的依 ...

  4. 微信APP支付服务端开发Java版（一）

    一.准备工作 去微信开发者中心下载(扫码支付,里面的大部分代码是可以用的) https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11 ...

  5. leetcode日记 Product of Array Except Self

    Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...

  6. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  7. java 转换流

    OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的 charset 将要写入流中的字符编码成字节.它使用的字符集可以由名称指定或显式给定,否则将接受平台默认的字符集. imp ...

  8. cocos2d-x WebSocket

    WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道 ...

  9. 关于在工程中添加新文件时的LNK2019错误的一个解决办法

    我这几天一直在研究Qt的串口程序,在读懂了官方给出的实例程序后我决定把其多线程的串口监视程序加入到我自己的工程中,便直接把问价复制到自己的工程下面,在Qt中加入到自己的工程中,但是总是出现LNK201 ...

  10. j2ee学习资料收集

    1    tomcat web.xml加载顺序,  讲解了web.xml什么时候加载,内部的各个组件加载的顺序 http://blog.sina.com.cn/s/blog_4553489c01010 ...