jQuery简介

什么是jQuery?
jQuery就是一个JavaScript函数库,没什么特别的。(开源)联想SQLHelper类
jQuery能做什么?jQuery是做什么的?
jQuery本身就是一堆JavaScript函数,JavaScript是做什么的,jQuery也一样。毕竟jQuery只是用JavaScript编写的函数库而已,有些功能jQuery没有封装,则还需要通过自己写JavaScript来实现。
jQuery的特点?Write Less,Do More
对于不同控件具有统一的操作方式。
体积小(几十KB)、使用简单方便(Write Less Do More)
链式编程$("#div1").draggble().show().hide().fly() 、隐式迭代
、插件丰富、开源、免费。插件多缺什么找什么
让编写JavaScript程序更简单、更强大!

jQuery中的顶级对象$
jQuery中最常用的对象即$对象,要想使用jQuery的方法必须通过$对象。只有将普通的Dom对象封装成jQuery对象,然后才能调用jQuery中的各种方法。
$是jQuery简写,在代码中可以使用jQuery代替$,但一般为了方便大家都直接使用$。
 //$(); //相当于js的window,简单省流量,快
        //jQuery(); //写法不同,但是意义一样
        //document//直接写表示的是document对象,只能点出odc的属性和方法
        //$(document)//表示的是jQuery对象,只能点出jq的属性和方法
        //$(document)//这是把document转换成jq对象的一种写法

简单的jQuery代码
需求:页面加载完毕后弹出“加载完毕!”。
通过window.onload实现。
通过jQuery的方式实现。
$(document).ready(fn);
$(fn);  【等价于$(document).ready(fn);】
window.onload与$(document).ready(fn);的区别
window.onload需要等待页面完全加载完毕才会触发,即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。
$(document).ready();可以多次注册事件处理程序,并且最终都会执行,而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。
使用jQuery实现window.onload的效果:$(window).load(fn);
jQuery中注册事件是load(fn)而不是onload(fn);与Dom不一样。

jQuery中提供的两个函数

$.map(array,callback(element,index));
对于数组array中的每个元素,调用callback()函数,最终返回一个新的数组。原数组不变。
案例1:将一个数组中的元素翻倍,并返回一个新数组。
        var arr = [1, 2, 3, 4, 5];
        var newArr=$.map(arr, function (ele, index) {
            return ele * 2;
        });
$.each(array,fn)//遍历数组,return false来退出循环。
主要用来遍历数组,不修改数组,对于普通数组或者“键值对”数组都没有问题。
在each函数中可以直接使用this,表示当前元素的值。
        var dict = { "name": "小杨", "age": "18", "gender": "男", "email": "yhb@itcast.cn" };
        $.each(dict, function (k, v) {
            alert(arguments[0]+'--->'+arguments[1]);
            alert(k+'--->'+v);
        });

map一般是对普通数组的操作,返回键值对可能会有点小问题.map主要是遍历修改返回新数组的
$.each();主要是遍历数组和键值对,each中用this指的是value,无论是键值对还是普通数组.普通数组中k和v指的是下标和值
        var arr = [1, 2, 3, 4, 5];
        $.each(arr, function (k, v) {
            alert(k+','+v);
            if (k == 2) { return false; }
        });

jQuery中的trim()
$.trim(字符串);//去掉两端空格,调试看实现方式。内部也是通过正则表达式实现的。
字符串.replace(/^\s+/,’’);
trimLeft = /^[\s\xA0]+/;trimRight = /[\s\xA0]+$/;

jQuery对象、Dom对象
Dom对象如果想调用jQuery的方法必须先转换为jQuery对象。
Dom对象:文档树中的对象都是dom对象。
jQuery对象:把Dom对象包装后就得到了jQuery对象。
如何获取Dom对象?
var spObj=document.getElementById(‘span1’);
spObj.innerText=‘Hello World’;//存在浏览器兼容问题
如何将Dom对象转换为jQuery对象?Dom→jQuery
$(spObj).text();//$(Dom对象),就将Dom对象转换为了jQuery对象。
不能通过jQuery对象调用Dom对象的方法,例如:$(spObj).innerHTML;
如何将jQuery转换为Dom对象?jQuery→Dom
$(spObj).get(0).innerHTML
$(spObj)[0].innerHTML
如何直接通过jQuery方式获取页面上的元素?(获取后直接就是一个jQuery对象)
$(‘#id’)、$(‘span’)、$(‘.cls’)、……
通过jQuery对象即可调用:.text()、val()、html()、css(‘color’,’red’)、……。jQuery中大多都是方法少有属性,因为属性很难链式编程。获取值、设置值都是使用的同一个方法,有参数表示设置值,无参数表示取值。

下面的方法,没有参数表示获取值,有参数表示设置值
                .text(); 方法相当于innerText;
                .html();方法相当于innerHTML;
                .val();是设置value的;
            };

jQuery选择器1
选择器:用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。(学会了css的选择器就会jQuery的选择器了)
Dom中如何获取页面中的元素对象?
document.getElementById(‘id’);
document.getElementsByTagName(‘input’);
document.getElementsByName(‘gender’);
jQuery中获取页面中的元素对象
Id选择器:$(‘#id’);
标签选择器:$(‘input’)【$(‘*’);选择页面上的所有元素。】
(*)属性过滤选择器:$(‘*[name=gender]’)或$(‘[name=gender]’)

链式编程
.html(‘val’).text(‘val’).css()链式编程,隐式迭代。
链式编程注意:$(‘div’).html(‘设置值’).val(‘设置值’);这样可以,但是$(‘div’).html().text()这样是不对的,因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。

jQuery选择器2
类样式选择器:$(‘.class’);
<style type="text/css">
        .test{ background-color:Red}
    </style>
    <script type="text/javascript">
        $(function() {
        $(".test").click(function() {
                alert($(this).text());
            });
        });
    </script>   
    <p class="test">test1</p>
    <p class="test">test2</p>
    <p class="test">test3</p>

标签+类选择器
$(function () {
            $('#btn1').click(function () {
                //必须即是div标签,还得应用功能了cls类样式才能被匹配到。
                $('div.cls').text('找死....');
            });
        });
============================================
 <input type="button" name="name" value="button" id="btn1" />
    <div class="cls">
        divk
    </div>
    <span class="cls">content</span>

jQuery选择器3
多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签元素。【将每个选择器匹配到的结果合并到一起】
层次选择器:
(1)后代,$(“div li")获取div下的所有li元素(后代,子、子的子……)
(2)子元素,$(“div > li”)获取div下的直接li子元素 【必须是直接子元素】
(3)相邻元素1:$(“.menuitem + div”)获取样式名为menuitem之后的相邻的(紧接着的)第一个div元素(不常用)等同于$(‘.menuitem’).next(‘div’);如果相邻的那个元素不是div,则不会继续向后找。
(4)相邻元素2:$(“.menuitem ~ div”)获取样式名为menuitem之后所有的兄弟div元素,等同于$(‘. menuitem ’).nextAll(‘div’)。【nextAll(‘*’)或nextAll()表示后面的所有元素。】
$(‘*’);选取所有的元素。
注意:选择器表达式中的空格不能多不能少。易错!过滤器与表单选择器时注意。
=================================================================
$(function () {
            $('#btn').click(function () {
                //$('span').css('backgroundColor', 'red');
                //$('div span').css('backgroundColor', 'red');//这个元素中的元素
                //$('div>span').css('backgroundColor', 'red'); //每个div下的直接的span元素
                //$('div+span').css('backgroundColor', 'red');//这个元素后紧跟着的第一个元素
                //$('div~span').css('backgroundColor', 'red');//这个元素后跟着的所有元素
            });
        });
==================================================================

获得兄弟元素的几个方法
next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素(上一个)
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
案例:页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红,当点击某个li的时候,让该li之前的所有li背景色变黄,之后的所有li背景色变蓝。自己不变色。注意:nextAll()、prevAll()等方法返回值是一个元素集合,这里链式编程时要想清楚当前返回的值是什么。
=================================================================
$(function () {
            $('#u li').mousemove(function () {
                $(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor', ‘ ’);
            }).click(function () {
                //$(this).prevAll().css('backgroundColor', 'yellow');
                //$(this).nextAll().css('backgroundColor','blue');
                //不能直接点,进行链式编程,因为已经破坏掉了,除非修复一下
                //end(),修复上次破坏前
                $(this).prevAll().css('backgroundColor', 'yellow').end().nextAll().css('backgroundColor', 'blue');
            });
        });
=======================================================================================

基本过滤选择器
:first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd,选取索引是偶数、奇数的元素:$("input:even")选取索引是奇数的<input>
:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
$(":header")选取所有的h1……h6元素(*)
$("div:animated")选取正在执行动画的<div>元素。 (*)
========================举例======================================
//$('div:first').text('卡卡西');
//$('div').first().text('.net');
//$('div:last').text('最后的一个');
//$('div').last().text('最后一个');
$('div:even').css('backgroundColor', 'red');//偶数
$('div:even').css('backgroundColor', 'yellow');//奇数
//$('div:eq(2)').css('backgroundColor', 'yellow');索引为2
//$('div:lt(2)').css('backgroundColor', 'yellow');小于2
//$('div:gt(2)').css('backgroundColor', 'yellow');大于2
$(‘div:gt(2):lt(2)’).css(‘backgroundColor’, ‘yellow’);大于索引2的又小于后面索引2的,每次筛选都是上次筛选
$(‘div:not(.cls)’).css(‘backgroundColor’,‘red’);除了应用这个样式的,其他的背景变红色
$(‘h1,h2,h3,h4,h5,h6’).css(‘color’,‘red’);下面写法------
$(‘:header’).css(‘color’,‘red’);上面写法----------------------

jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)的更多相关文章

  1. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  2. JQuery的链式编程与隐式迭代

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery链式编程

    链式编程 多行代码合并成一行代码,前提要认清此行代码返回的是不是对象.是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程,隐式迭代 链式编程注意:$(‘div ...

  4. iOS开发技巧系列---使用链式编程和Block来实现UIAlertView

    UIAlertView是iOS开发过程中最常用的控件之一,是提醒用户做出选择最主要的工具.在iOS8及后来的系统中,苹果更推荐使用UIAlertController来代替UIAlertView.所以本 ...

  5. iOS利用block实现链式编程方法(Objective-C链式编程)

    objc利用block实现链式编程方法 因为不好读.block和其他语言的匿名函数一样,很多程序员刚开始很难主动去用他. 本文描述block作为属性的实际使用,看懂block,并讲解如何利用block ...

  6. iOS 开发之使用链式编程思想实现简单的计算器

    链式编程思想是将多个操作(多行代码)通过点号(.)链接在一起成为一句代码,使代码可读性好.例如 a(1).b(2).c(3). 链式编程思想最为关键的是,方法的返回值是block,block必须返回对 ...

  7. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  8. 从零开始学 Web 之 jQuery(三)元素操作,链式编程,动画方法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 使用 Visual Studio Team Test 进行单元测试和java中的测试

    C#中test测试地 方法一. 1.从NUnit官网(http://www.nunit.org/index.php)下载最新版本NUnit,当前版本为NUnit2.5.8. 2.安装后,在VS2008 ...

  2. 一道关于比赛胜负的Sql查询题目

    以前做过一道题目,一直没有来得及总结下来.贴图: 记得以前曾经找到了两种方法,今天试了一下,还是可以的,贴出过程: 下面是具体的查询方法: 原来放的是图片,今天又练习了一下,附代码: create T ...

  3. MySQL 5.7.11 重置root密码

    .修改/etc/my.conf,添加参数skip-grant-tables .重启mysql service mysqld stop service mysqld start .用root 直接登录 ...

  4. XAML 概述四

    这一节我们来简单介绍一下XAML的加载和编译,它包括如下三种方式:  · 只使用代码  · 使用代码和未编译的XAML  · 使用代码和编译过的BAML 一. 只使用代码 我们首先创建一个简单的控制台 ...

  5. java的JVM机制

    1.jre:java运行环境 提供一个JVM和一些基础类库.2.只安装jre以后,机器就具备了运行java程序的条件.但是不具备开发java程序的条件.安装JDK以后,在c:/program file ...

  6. matlab实现贝塞尔曲线绘图pdf查看

    贝塞尔曲线绘图方法: %Program 3.7 Freehand Draw Program Using Bezier Splines %Click in Matlab figure window to ...

  7. windows环境下MySQL重启的命令行说明

    ctrl+r 弹出运行框,输入cmd,然后再控制太输入命令: 1.点击“开始”->“运行”(快捷键Win+R). 2.停止:输入 net stop mysql 3.启动:输入 net start ...

  8. JPA学习---第八节:使用JPQL语句进行查询

    1.JPQL 语句查询,代码如下: @Test public void query(){ EntityManagerFactory factory = Persistence.createEntity ...

  9. Oracle 中 for update 和 for update nowait 的区别

    原文出处http://bijian1013.iteye.com/blog/1895412 一.for update 和 for update nowait 的区别 首先一点,如果只是select 的话 ...

  10. 发现一个很好的android开发笔记库

    http://linux.linuxidc.com/ 密码和用户名都是www.linuxidc.com android基础教程到高手进阶,游戏开发,数据存储,android架构等.谢谢网站主分享!