jQuery

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34211761

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/langgege/blog/674284

2019独角兽企业重金招聘Python工程师标准>>>

jQuery对象与DOM对象向的关系;jQuery选中器的种类;jQuery操作DOM;样式操作;遍历节点;jQuery的事件处理;jQuery的合成事件种类;取消事件冒泡;获取事件源;模拟操作的;动画

一.jQuery对象与DOM对象向的关系：
1.jQuery对象本质上是一个DOM对象数组，它在该数组上扩展了一些操作数组中元素的方法。
2.可以直接操作这个数组：
   - obj.length:获取数组长度。
   - obj.get(index):获取数组中的某一个DOM对象。
   - obj[index]:等价于obj.get(index)。
3.DOM对象可以直接转换为jQuery对象：
   - $(DOM对象)
-----------------------------------------------------------------------------------------
jQuery选择器的种类：
1.基本选择器：
- 元素选择器：依据标签名定位元素：$("标签名")
- 类选择器：根据class属性定位元素：$(".class属性名")
- id选择器：根据id属性定位元素：$("#id")
- 选择器组：定位一组选择器所对应的所有元素：$("#id,.importent")
例   console.log($("#gd"));

2.层次选择器：
- $("select1 select2"):在select1元素下，选中所有满足select2的子孙元素。
- $("select1>select2"):在select1元素下，选中所有满足select2的子元素。
- $("select1+select2"):选中select1元素的，满足select2的下一个弟弟。
- $("select1~select2"):选中select1元素的，满足select2的所有弟弟。
例 console.log($("#gd~")); （此处select2可以不写）
$("#d1 .importent")

3.过滤选择器：
- 基本过滤选择器：根据元素的基本特征定位元素，常用于表格和列表
   - :first：第一个元素   - :last
   - :not(selector)：把selector排除在外
   - :even：挑选偶数行(下标为0、2、4...)   - :odd：挑选奇数行
   - :eq(index):下表等于index的元素
   - :gt(index):下表大于index的元素
   - :lt(index):下表小于index的元素
例 <body>内:   <ul>
           <li>山东</li>
           <li>山西</li>
           <li id="gd">广东</li>
           <li>广西</li>
           <li>台湾省</li>
           <li>河北</li>
           <li>河南</li>
       </ul>
<script>内：   console.log($("li:last"));
       console.log($("li:odd"));
       console.log($("li:lt(3)"));
       console.log($("li:not(li:eq(3))"));

- 内容过滤选择器：根据文本内容定位元素。
   - :contains(text):匹配包含指定文本的元素。
   - :empty:匹配所有不包含子元素或文本的空元素。
例   console.log($("li:contains('西')"));

- 可见性过滤选择器：根据可见性定位元素。
    - :hidden：匹配所有不可见元素，或type为hidden的元素。
   - :visible：匹配所有的可见元素。
例   <p style="display:none">程祖红</p>
   console.log($("p:hidden"));

- 属性过滤选择器：根据属性定位元素。
   - [attribute]：匹配具有attribute属性的元素。
   - [attribute=value]：匹配属性等于value的元素。
   - [attribute!=value]：匹配属性不等于value的元素。
例   console.log($("li[id!='gd']"));

- 状态过滤选择器：根据状态定位元素。
   - :enabled：匹配可用的元素   - :disabled
   - :checked（单选多选）：匹配选中的checkbox
   - :selected（下拉选）：匹配选中的option
例   console.log($("input:checked"));

- 表单选择器：
   - :text 匹配文本   - :password 匹配密码框
   - :radio 匹配单选框   - :checkbox 匹配多选框
   - :submit 匹配提交按钮 - :reset 匹配重置按钮
   - :button 匹配普通按钮   - :file 匹配文件框
   - :hidden 匹配隐藏框
例   console.log($(":password")); （input可以省略不写）
-------------------------------------------------------------------------------------------
jQuery操作DOM:
一.读写节点：
1.读写节点的HTML内容：读obj.html()/写obj.html("<>123</>")
2.读写节点的文本内容：obj.text()/obj.text("123")
3.读写节点的value值：obj.val()/obj.val("abc")
4.读写节点的属性值：obj.attr("属性名")/obj.attr("属性名","属性值")
例       //html() == innerHTML
       console.log($("p:first").html());
       $("p:first").html("jQuery可以<u>读写</u>节点")
       //text() == innerText
       console.log($("p:eq(1)").text());
       $("p:eq(1)").text("jQuery可以<u>增删</u>节点");
       //val() == value
       console.log($(":button:first").val());
       $(":button:first").val("AAA");
       //attr() == getAttribute()+setAttribute()
       console.log($("img:first").attr("src"));
       $("img:first").attr("src","../images/02.jpg");

二.增删节点：
1.创建DOM节点：$("节点内容")
例 var $li1 = $("<li>保定</li>");
var $li2 = $("<li>青岛</li>");

2.插入DOM节点：
   - parent.append(obj) 作为最后一个子节点添加进来。
   - parent.prepend(obj) 作为第一个子节点添加进来。
   - brother.after(obj) 作为下一个兄弟节点添加进来。
   - brother.before(obj) 作为上一个兄弟节点添加进来。
例   $("ul").prepend($li1);
   $("#hf").after($li2);

3.删除DOM节点：
   - obj.remove() 删除节点
   - obj.remove(selector) 只删除满足selector的节点
   - obj.empty() 清空节点
例   $("li:gt(4)").remove();
   //empty() == html("")
   $("#hf").empty();
-------------------------------------------------------------------------------------------
样式操作
- addClass("") 追加样式   - removeClass("")移除指定样式
- removeClass() 移除所有样式
- toggleClass("") 切换样式
- hasClass("") 判断是否有某个样式
- css("") 读取css的值
- css("","") 设置样式
例   $("#p2").addClass("big").addClass("importent");
   //$("#p2").removeClass("big").removeClass("important");
   $("#p2").removeClass();
   console.log($("#p2").hasClass("big"));
   $("#p3").css("color","blue");
   console.log($("#p3").css("color"));

   //toggleClass = hasClass+addClass/removeClass
   $("#p2").toggleClass("importent");
------------------------------------------------------------------------------------------
遍历节点：即根据层次查询节点
- children()/children(selector) 子节点
- next()/next(selector) 下一个兄弟节点
- prev()/prev(selector) 上一个兄弟节点
- siblings()/siblings(selector) 所有兄弟
- find(selector) 查找满足选择器的所有后代
- parent() 父节点
例   console.log($("ul").children());
   console.log($("#hf").next());
   console.log($("#hf").siblings());
   console.log($("ul").find("li:not(#hf)"));
------------------------------------------------------------------------------------------
jQuery的事件处理：
1.jQuery的事件绑定：
- 语法：$obj.bind(事件类型，事件处理函数)
如：$obj.bind('click',fn);
简写：$obj.click(fn);

2.获取事件源对象event：
- 只需要给事件处理函数传递任意一个参数，如：$obj.click(function(e){...});
- e就是事件对象，但是已经经过jQuery对底层事件对象的封装。
- 封装后的时间对象可以方便的兼容各浏览器。

3.事件对象的常用属性：
- 获取事件源：e.target ,返回值是DOM对象
- 获取鼠标点击的坐标：e.pageX/e.pageY

例   <body>
       <p>
           <input type="button" value="A"/>
           <input type="button" value="B"/>
       </p>
   </body>

二.获取事件源
1.js中
e.srcElement || e.target;
2.jQuery中
e.target;
-----------------------------------------------------------------------------------------
模拟操作的语法：
$obj.trigger(事件类型)
$obj.trigger("focus");
简写形式：$obj.focus();
例   var $texts = $(":text")
   $texts.eq(index).trigger("focus");
-----------------------------------------------------------------------------------------
动画：
1.显示隐藏动画效果： show()/hide()
- 用法：$obj.show(执行时间，回调函数)
- 执行时间：slow,normal,fast或毫秒数。
- 回调函数：动画执行完毕之后要执行的函数。
例   <img src="../images/01.jpg">

   $("img").show(3000,function(){
       alert("已显示");
   });

2.上下滑动式的动画效果：slideDown()/slideUp()
- 用法同上。
3.淡入淡出式动画效果：fadeIn()/fadeOut()
- 用法同上。

4.自定义动画效果：animate(偏移位置，执行事件，回调函数)
- 偏移位置：{}描述动画执行之后元素的样式。
例   <input type="button" value="走起" onclick="go();"/>

   function go(){
       //参数1：偏移量（直接量/json对象）
       //参数2：事件
       //参数3：回调函数。
       $("img").animate({"left":"300px"},2000)
       .animate({"top":"300px"},2000)
       .animate({"left":"0"},2000)
       .animate({"top":"0"},2000);
   }