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. android studio 导入一个已有的android studio project作为lib使用

    android studio 导入一个已有的android studio project作为lib使用 新项目来了. 需要搭建框架. android studio对我来说还是很陌生,之前一个项目在同事 ...

  2. USACO Milking Cows

    思路: 脑抽了,一看题目,这不就是线段树么,离散化区间合并..最终发现我并不会写...于是看了下题目范围10^6...模拟水之..每个区间左端点+1,右端点-1,从左到右扫一下就行了... 代码: / ...

  3. 推荐一个实用的css工具

    后台程序员整天在和数据打交道,天天的活就是抱着mysql抠数据,如果让他去写网站的样式,就让人感觉力不从心,所以推荐一个twitter的团队开发的东西,几乎囊括了网站所需的样式,http://www. ...

  4. Bestcoder Round 47 && 48

    1.Senior's Array(hdu 5280) 题目大意:给出大小为N的数组和P,求将数组中的某个元素替换为P后的最大连续子段和.N<=1000 题解: 1.送分题,比赛的时候只想到枚举替 ...

  5. C# MD5加密

    public static string Encrypt(string txt) { System.Security.Cryptography.MD5CryptoServiceProvider md5 ...

  6. C语言简易文法（无左递归）

    <程序> -〉 <外部声明> | <函数定义><外部声明> -〉<头文件> | <变量> | <结构体> <头 ...

  7. Bootstrap<基础二> 网格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格 ...

  8. 【浅层优化实战】ssh远程登录Linux卡慢的全过程排查及解决方案

    ssh远程登录Linux卡慢的全过程排查及解决方案 前言: 在linux操作系统使用过程中偶然一次感到使用ssh远程连接软件连接操作系统需要等待许久,第一次没在意,第二次也没在意,第三次有点忍受不住了 ...

  9. curl获取远程图片存到本地

    $url = 'http://sssss/sss/xu0fLo9waqKSTDO7j0kSO41O5Luq3LB6ozUvY4O7OsXUWNicB49fBs8nGYzoqcwGDARQZHpVuic ...

  10. Html标签第三课

    1.css div { position:absolute; } #d1 { height:100px; width:100px; border: solid 1px red; background- ...