jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

时间:2019-08-19
本文章向大家介绍jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器），主要包括jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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’);上面写法----------------------
————————————————
版权声明：本文为CSDN博主「「已注销」」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/XHQT520/article/details/50651057

原文地址：https://www.cnblogs.com/wsyyzy/p/11378414.html

随机文章
Javascript知识点必读
最近更新