jQuery 之（一）选择器、快捷操作

墨蓝 2022-09-26 01:53 158阅读 0赞

# jQuery #

## 什么是jquery ##

其是对javascript封装的一个框架包
    简化对javascript的操作
    javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
    jquery代码：无需考虑浏览器兼容问题、代码足够少

## 宗旨和特点 ##

![这里写图片描述][20160914211009716]

特点：
    ①   语法简练、语义易懂、学习快速、丰富文档。 
    ②   jQuery 是一个轻量级的脚本，其代码非常小巧 
    ③   jQuery 支持 CSS1~CSS3 定义的属性和选择器 
    ④   jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。 
    ⑤   能将 JavaScript 脚本与 HTML 源代码完全分离，便于后期编辑和维护。 
    ⑥   插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能

## 出现的年代 ##

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.2，官方地址为：[http://jquery.com/][http_jquery.com]，中文地址为 [http://jquery.org.cn/][http_jquery.org.cn]。

## 其他相关的javascript框架包 ##

Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery

*  Prototype：与面向对象的原型继承关键字一致，该框架的特点是功能扩展比较容易。
 *  YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。  
    例如效果之一：标签切换对应内容  
    ![这里写图片描述][20160914211254637]
 *  Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。  
    该框架可以实现效果之一：页面不同区域进行拖拽效果。  
    该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
 *  jQuery：javascript+query  
    使用前期，jquery侧重快速找到页面上各种节点。  
    后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。

jquery的版本：  
1.0.0 1.0.1 1.0.2 1.1.x 1.2.1 1.2.x 1.3.x 1.4.x 1.5.x………1.11.2

![这里写图片描述][20160914211452061]

## 简单使用 ##

# 选择器 #

在页面上获得各种元素节点对象而使用的条件就是选择器。  
document.getElementById()  
document.getElementsByTagName();  
document.getElementsByName();

## 基本选择器 ##

$(‘#id属性值’)  ----------->document.getElementById()
    $(‘tag标签名称’)----------->document.getElementsByTagName();
    $(‘.class属性值’) class属性值选择器
    $(‘*’)     通配符选择器
    $(‘s1,s2,s3’)联合选择器

## 层次选择器 ##

### $(s1 s2) \[父子\] ###

![这里写图片描述][20160915105257480]

### $(s1 > s2) \[父子\] ###

![这里写图片描述][20160915105427678]

### $(s1 + s2) \[兄弟\] ###

![这里写图片描述][20160915105517647]

### $(s1 ~ s2) \[兄弟\] ###

![这里写图片描述][20160915105556836]

## 并且(过滤)选择器 ##

![这里写图片描述][20160915112708377]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            <script type="text/javascript"> function f1(){ //$('li').css('background-color','blue'); 找到全部li //:first 找到第一个 $('li:first').css('background-color','blue'); //:last 最后一个 $('li:last').css('background-color','green'); //:eq(下标) $('li:eq(4)').css('background-color','pink'); //:gt(索引) 下标大于索引值 $('li:gt(4)').css('color','red'); //:lt(索引) 下标小于索引值 $('li:lt(3)').css('color','orange'); //:even 下标索引值等于偶数的 $('li:even').css('background-color','gray'); //:odd 下标索引值等于奇数的 $('li:odd').css('color','red'); //:not(选择器) 去除与“选择器”匹配的元素 $('li:not(#zhao,#zhang)').css('color','red'); } function f2(){ //许多选择器都可以作为“并且”选择器使用 //$(s1s2s3s4s5)----->并且选择器(保证不会产生歧义) //$(s1,s2,s3,s4,s5)----->联合选择器 $('li.hero').css('color','blue'); //$('.heroli').css('color','blue'); //产生歧义 $(':header.hero').css('background-color','green'); $('.hero:header').css('color','red'); } </script>
        </head>
        <body>
            <h1>并且选择器</h1>
            <h2 class="hero">并且选择器</h2>
            <h3 class="hero">并且选择器</h3>
            <h4>并且选择器</h4>
            <ul>
                <li>刘备</li>
                <li id="zhang">张飞</li>
                <li class="hero">关羽</li>
                <li id="zhao">赵云</li>
    
                <li class="hero">孙权</li>
                <li>周瑜</li>
                <li class="hero">黄盖</li>
                <li>吕蒙</li>
            </ul>
    
            <input type="button" value="触发1" onclick="f1()" />
            <input type="button" value="触发2" onclick="f2()" />
        </body>
    </html>

## 内容过滤选择器 ##

### :contains(内容) ###

包含内容选择器，获得节点内部必须通过标签包含指定的内容
    $(“div:contains(beijing)”)
    <div>linken love beijing</div>  //<---获得此行
    <div>jack love shanghai</div>

### :empty ###

获得空元素(内部没有任何元素/文本(空) )节点对象
    $(“div:empty”)
    <div>linken love beijing</div>
    <div>jack love shanghai</div>
    <div></div>  //<---获得此行
    <div><img /></div>
    <div>      </div>

### :has(选择器) ###

内部包含指定元素的选择器
    $(“div:has(#apple)”)
    <div>hello</div>
    <div><p></p></div>
    <div><span id=”apple”></span></div>  //<---获得此行
    <div><span class=”apple”></span></div>

### :parent ###

寻找的节点必须作为父元素节点存在
    $(“div:parent”)
    <div>linken love beijing</div>  //<---
    <div>jack love shanghai</div>  //<---
    <div></div>
    <div><img /></div>  //<---
    <div>      </div>  //<---

## 表单域选中选择器 ##

复选框、单选按钮、下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            <script type="text/javascript"> function f1(){ //获得复选框选中情况 //$(:checked) 过滤出被选中的复选框、单选按钮 console.log($('input:lt(4):checked')); //每个过滤选择器使用之前，已经获得的元素节点的下标进行归位(从0开始重新计算) //input:gt(3) 过滤掉‘男’之前的元素，:lt(3)从‘男’开始从0计算 //单选按钮 console.log($('input:gt(3):lt(3):checked'));//男 女 保密 //$(:selected) 获得下拉列表的选中情况 console.log($('option:selected')); } </script>
        </head>
        <body>
            <h1>表单域选中选择器</h1>
            爱好：
            <input type="checkbox" name="hobby[]" value="篮球" />篮球  
            <input type="checkbox" name="hobby[]" value="排球" />排球  
            <input type="checkbox" name="hobby[]" value="足球" />足球  
            <input type="checkbox" name="hobby[]" value="乒乓球" />乒乓球  
            <br /><br />
            性别:
            <input type="radio" name="sex" value="男" />男  
            <input type="radio" name="sex" value="女" />女  
            <input type="radio" name="sex" value="保密" />保密  
            学历:
            <select>
                <option value="0">请选择</option>
                <option value="1">小学</option>
                <option value="2">中学</option>
                <option value="3">大学</option>
            </select>
            <br /><br />
            <input type="button" value="触发" onclick="f1()" />
        </body>
    </html>

# 属性操作 #

<input  type=”text”  class=”apple”  id=”username” name=”username” value=”tom” address=”beijing”/>
    
    itnode.属性名称
    itnode.属性名称= 值;
    itnode.getAttribute(属性名称);
    itnode.setAttribute(属性名称，值);
    
    jquery方式操作属性(attribute)：
    $().attr(属性名称);        //获得属性信息值
    $().attr(属性名称，值);      //设置属性的信息
    $().removeAttr(属性名称);  //删除属性
    $().attr(json对象);          //同时为多个属性设置信息值，json对象的键值对就是名称和值
    $().attr(属性名称，fn);     //通过fn函数执行的return返回值对属性进行赋值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            <script type="text/javascript"> function f1(){ //获得属性信息 console.log($('#username').attr('type')); console.log($('#username').attr('class')); console.log($('#username').attr('id')); console.log($('#username').attr('name')); console.log($('#username').attr('value')); console.log($('#username').attr('address')); } function f2(){ //修改属性 $('#username').attr('class','orange'); $('#username').attr('name','email'); $('#username').attr('value','jim@sina.com'); $('#username').attr('address','shanghai'); $('#username').attr('weight','120'); //新属性 //$('#username').attr('type','radio'); //禁止修改，改了也生效 $('#username').attr('id','email123'); } function f3(){ //批量修改属性 //$().attr(json对象); var jn = {name:'tel','class':'pear',value:'122235546',address:'shenyang'}; $('#username').attr(jn); } function f4(){ //函数返回值设置属性 $('#username').attr('value',function(){ return 10+20; }); } function f5(){ //删除属性 $('#username').removeAttr('class'); $('#username').removeAttr('name'); $('#username').removeAttr('value'); $('#username').removeAttr('address'); $('#username').removeAttr('id'); //$('#username').removeAttr('type'); //禁止删除 } </script>
        </head>
        <body>
            <h1>属性操作</h1>
            <input type="text" class="apple" id="username" name="username" value="tom" address="beijing" />
            <input type="button" value="获取" onclick="f1()" />
            <input type="button" value="设置" onclick="f2()" />
            <input type="button" value="批量修改" onclick="f3()" />
            <input type="button" value="函数修改" onclick="f4()" />
            <input type="button" value="删除属性" onclick="f5()" />
        </body>
    </html>

# 快捷操作 #

## class属性值操作 ##

$().attr(‘class’,值);
    $().attr(‘class’);
    $().removeAttr(‘class’);  //删除class的属性
    
    $().addClass(值);       //给class属性追加信息值
    $().removeClass(值);    //删除class属性中的某个信息值
    $().toggleClass(值);    //开关效果，有就删除，没有就添加

![这里写图片描述][20160915153303377]

## 标签包含内容操作 ##

<div>hello<span>world</span></div>
    
    javascript操作：
        dvnode.innerHTML 获得div包含的信息
        dvnode.innerHTML = XXX；  设置div包含的内容
        (innerHTML不是w3c标准技术，许多浏览器对其有支持而已)
    
    jquery操作：
        $().html();        //获得节点包含的信息
        $().html(信息);      //设置节点包含的内容
        $().text();            //获得节点包含的“文本字符串信息”内容
        $().text(信息);      //设置节点包含的内容(有html标签就把“><”符号变为符号实体)

### html() 和 text()方法的区别： ###

①   获取内容
        前者可以获取html标签 和 普通字符串内容
        后者只获取普通字符串内容
    ②   设置内容    
        前者可以设置html标签 和 普通字符串内容
        后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----<  >---->   空格------ 
        以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致。

## css样式操作 ##

$().css(name，value);   //设置
    $().css(name);         //获取
    $().css(json对象);       //同时修改多个css样式

### css()样式操作特点： ###

1.  样式获取，jquery可以获取 行内、内部、外部的样式。  
    dom方式只能获得行内样式
2.  复合属性样式需要拆分为”具体样式”才可以操作  
    例如： background 需要拆分为 background-color background-image 等进行操作  
    border： border-left-style border-left-width border-left-color 等  
    margin： margin-left margin-top 等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            <script type="text/javascript"> function f1(){ //jquery可以获取 行内、内部、外部的样式 //dom方式只能获得行内样式 console.log($('div').css('width'));//行内样式 console.log($('div').css('height')); console.log($('background-color')); console.log($('div').css('color'));//内部样式 console.log($('div').css('font-size'));//外部样式 //当前jquery1.4.4版本不能直接操作"复合属性"样式，需要变为具体样式操作 // //例如：border----->border-left(top/right/bottom)-style border-left-color border-left-width // margin----->margin-left/top/right/bottom // padding----->padding-left/top/right/bottom // background----->background-color/image //console.log($('div').css('border'));//空字符串 console.log($('div').css('border-top-color'));//rgb(0, 0, 255) console.log($('div').css('border-top-width'));//4px console.log($('div').css('border-top-style'));//solid //document.getElementsByTagName('div')[0].style.width } function f2(){ //有就更改，没有就添加 $('div').css('width','300px'); $('div').css('background-color','lightgreen'); //把 复合样式 变为 具体样式 可以设置 $('div').css('border-right-color','red'); $('div').css('border-right-width','10px'); } function f3(){ //批量设置css var jn = { 'width':'400px','height':'300px'} $('div').css(jn); } </script>
            <link href="./11.css" type="text/css" rel="stylesheet" />
            <style type="text/css"> div{ color:red; border:4px solid blue;} </style>
        </head>
        <body>
            <h1>css样式快捷操作</h1>
    
            <div style="width:200px; height:150px; background-color:lightblue;">this is jquery subject</div>
    
            <input type="button" value="获取" onclick="f1()" />
            <input type="button" value="设置" onclick="f2()" />
            <input type="button" value="批量设置" onclick="f3()" />
        </body>
    </html>

## value属性快捷操作 ##

$().attr(‘value’);
    $().attr(‘value’,信息值);
    
    快捷操作：
    $().val();         //获得value属性值
    $().val(信息值);  //设置value属性的值
    该val方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。

### 复选框操作 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            <script type="text/javascript"> function f1(){ //获得复选框选中情况 //判断复选框选中：$().attr('checked'); ---> true选中/false未选中 console.log($('.hby:checked'));//获得选中的复选框 //遍历选中的项目，获得其value属性值 var s =''; for(var i=0; i<$('.hby:checked').length; i++){ s += $('.hby:checked').val() + ','; } //删除最后的逗号 //s = s.substr(位置,长度); 1,3,4 s = s.substr(0,s.length-1); console.log(s); } function f2(){ //设置复选框选中情况 //value值等于2和4的项目选中 //设置单独复选框先中 $(复选框).attr('checked',true); //设置多个复选框选中 $(全部复选框).val([value值元素，value值元素]); //val([元素，元素])参数是一个数组，即时一个项目选中也是数组 $('.hby').val([1,2,4]); } </script>
    
        </head>
        <body>
            <h1>复选框操作</h1>
    
            爱好：
            <input type="checkbox" class="hby" name="hobby" value="1" />篮球 
            <input type="checkbox" class="hby" name="hobby" value="2" />足球 
            <input type="checkbox" class="hby" name="hobby" value="3" />排球 
            <input type="checkbox" class="hby" name="hobby" value="4" />乒乓球 
    
            <br /><br />
            <input type="button" value="获取" onclick="f1()" />
            <input type="button" value="设置" onclick="f2()" />
        </body>
    </html>

### 下拉列表操作 ###

### 单选按钮操作 ###

## 复选框操作 ##

全选、反选、全不选
    $().attr(‘checked’,true);      //设置复选框选中
    $().attr(‘checked’,false);     //取消复选框选中
    $().attr(‘checked’);           //判断复选框选中情况，返回布尔值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>新建网页</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type='text/javascript' src='jquery-3.1.0.js' ></script>
            <script type="text/javascript"> function selAll(){ //全选 // $('li').css('color','red'); //css()方法内部有遍历机制，会为每个li设置样式 //$('.hby').attr('checked',true);//attr()方法内部有遍历机制，会为每个复选框设置选中 $(".hby").prop("checked", true); } function selNotAll(){ //全不选 //$('.hby').attr('checked',false); $(".hby").prop("checked", false); } function selFan(){ //反选 //遍历全部复选框，选中就取消，未选中就设置选中 //$('.hby') for(var i=0; i<$('.hby').length; i++){ //判断当前复选框选中情况 var flag = $('.hby:eq('+i+')').attr('checked'); $('.hby:eq('+i+')').attr('checked',!flag); } } </script>
    
        </head>
        <body>
            <h1>全选、全不选、反选操作</h1>
            爱好：
            <input type="checkbox" class="hby" name="hobby" value="1" />篮球 
            <input type="checkbox" class="hby" name="hobby" value="2" />足球 
            <input type="checkbox" class="hby" name="hobby" value="3" />排球 
            <input type="checkbox" class="hby" name="hobby" value="4" />乒乓球 
    
            <br /><br />
            <input type="button" value="全选" onclick="selAll()" />
            <input type="button" value="全不选" onclick="selNotAll()" />
            <input type="button" value="反选" onclick="selFan()" />
        </body>
    </html>

[20160914211009716]: /images/20220717/96c2d59c1d154c9fa1ec0c430aa517ec.png
[http_jquery.com]: http://jquery.com/
[http_jquery.org.cn]: http://jquery.org.cn/
[20160914211254637]: /images/20220717/2de9ae88983b43aeaa84728a3ce83e3a.png
[20160914211452061]: /images/20220717/88ca629b777e46f2b2f70228ad09380a.png
[20160915105257480]: /images/20220717/745028ad20fb4aef864a9ba61d07d66e.png
[20160915105427678]: /images/20220717/a62e32df51d945f3853125115dba20af.png
[20160915105517647]: /images/20220717/27a945731c984aca9e82768ced219b33.png
[20160915105556836]: /images/20220717/d2e3fb561cd543eca18385403f81cc09.png
[20160915112708377]: /images/20220717/626e8d2996cd4c77bf83d44993f80fb0.png
[20160915153303377]: /images/20220717/70eea59cddfa46479fe575a8925e2610.png