jQuery笔记1

最新推荐文章于 2023-09-05 13:45:58 发布

lelouch-

最新推荐文章于 2023-09-05 13:45:58 发布

阅读量127

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_41795868/article/details/88839579

版权

javascript相关操作
(1）Ajax操作
   问题：实现代码重复
   创建对象
   onreadystatechange
   open()
   send()
（2）dom相关操作
   问题：代码繁琐
   document.getElementById()
   document.getElementByTagName()
   document.getElementByName()
（3）事件对象（作用：获取鼠标坐标、感知被触发的键、组织事件流、阻止浏览器默认动作）
   问题：浏览器兼容问题
   获取事件对象
       主流浏览器：divnode.onclick = function(evt){}
                divnode.addEventListener("click",function(evt){})
                事件处理函数的第一个形参就是事件对象
       IE浏览器： divnode.onclick = function(){window.event}
               事件函数内部的全局变量event就是时间对象

   阻止事件流：
       主流浏览器： event.stopPropagation()
       IE浏览器： event.cancelBubble = true;
   阻止浏览器默认动作：
       主流浏览器： event.preventDefault();
       IE浏览器：event.returnValue = false;

使用jQuery可以避免上述问题
javascript代码：dom获得页面节点对象、ajax操作、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码非常少
宗旨：写得代码很少，实现很多的功能
特点：
①语法简练、语义易懂、学习快速、丰富文档。
②jQuery 是一个轻量级的脚本，其代码非常小巧
③jQuery 支持 CSS1~CSS3 定义的属性和选择器
④jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
⑤能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离，便于后期编辑和维护。
插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能
其他相关的javascript框架包：
Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery等等
Prototype：与面向对象的原型继承关键字prototype一致，该框架的特点是功能扩展比较容易。
YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。
通过标签切换到对应的内容是YUI实现效果之一
Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
该框架可以实现效果之一：页面不同区域进行拖拽效果。
jQuery：javascript+query
   使用前期，jquery侧重快速找到页面上各种节点。
   后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。
function f1(){
            //document.getElementsByTagName('h2')[0].style.backgroundColor = "lightblue";
            //通过jquery实现以上效果
            $('h2').css('backgroundColor','lightgreen');

//通过jquery实现ajax请求
//$.get('./01.php');//向01.php服务器端发送一个异步的get请求

            $.get('./01.php',function(msg){//ajax有请求、有回应
                //msg泛指服务器回来的信息
                alert(msg);
            });
        }
基本选择器：

层次选择器:

1 $(s1 s2) [父子]
派生选择器：在s1内部获得全部的s2节点(不考虑层次)
$(‘div span’)
<div>
<span></span>
<p>
<span></span>
或者更深的span
</p>
</div>
<span></span>

2 $(s1 > s2) [父子]
直接子元素选择器: 在s1内部获得子元素节点s2
$(‘div > span’)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>

3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(‘div + span’)
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>

4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(‘div + span’)
<span></span>
<div>
<span></span>
<p>
<span></span>
</p>
<span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>

并且(过滤)选择器
1 :first
   用法: $(”tr:first”) ; 单个元素的组成的集合
   匹配找到的第一个元素
2 :last
   匹配找到的最后一个元素
3 :not(selector)
   去除所有与给定选择器匹配的元素
4 :even
   匹配所有索引值为偶数的元素，从 0 开始计数
5 :odd
   匹配所有索引值为奇数的元素，从 0 开始计数
6 :eq(index)
   匹配一个给定索引值的元素，从 0 开始计数
7 :gt(index)
   匹配所有大于给定索引值的元素，从 0 开始计数
8 :lt(index)
   匹配所有小于给定索引值的元素，从 0 开始计数
9 :header
   匹配如 h1, h2, h3之类的标题元素

复杂用法
① 并且选择器可以单独使用
② 各种选择器都可以构成“并且”关系
③ 并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”(归零)处理
④ 多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”

.内容过滤选择器
1 :contains(内容)
包含内容选择器，获得的节点内部必须包含指定的内容
$(‘div:contains(beijing)’)
<div>linken like newyork</div>
<div>xiaoming like beijing</div>

2 :empty
获得空元素(内部没有任何元素节点/文本(空) 节点)节点对象
$(‘div:empty’)
<div>linken like newyork</div>
<div>xiaoming like beijing</div>
<div><img /></div>
<div> </div>
<div></div>

3 :has(选择器)
节点内部必须包含指定选择器对应的元素
$(‘div:has(.apple)’)
<div>linken like newyork</div>
<div>xiaoming like beijing</div>
<div><img /></div>
<div> </div>
<div></div>
<div><p class=”apple”></p></div>

4 :parent
寻找的节点必须作为父元素节点存在
$(‘div:parent’)
<div>linken like newyork</div>
<div>xiaoming like beijing</div>
<div><img /></div>
<div> </div>
<div></div>
<div><p class=”apple”></p></div>

表单域选中选择器
复选框、单选按钮、下拉列表
$(:checked)复选框、单选按钮选中选择器
$(:selected) 下拉列表选中选择器

总结：
1.选择器
a)基本选择器
#id   .class   tag标签    *    s1,s2,s3
b)层次选择器
$(s1 s2)
$(s1 > s2)
$(s1 + s2)
$(s1 ~ s2)
c)并且选择器
:first :last
:even :odd
:gt() :lt() :et()
:header   :not()
d)内容过滤选择器
:contains(text)
:empty
:has(selector)
:parent
e)表单域选中选择器
复选框、单选框 :checked
下拉列表         :selected