jQuery知识点总结

最新推荐文章于 2024-05-21 23:21:19 发布

wi大太阳

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量246

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_68721674/article/details/131751406

版权

jQuery的基础

将js对象获取方式函数以及事件等深度封装。思想:写的更少，做更多。 jQuery 出现的目的是加快前端人员的开发速度。

*JQuery使用

1.导入JQuery依赖的js文件

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

入门函数

// 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ;

$(function () { });//表示页面加载完成之后，相当window.onload = function () {}

// 第二种: 繁琐，但是也可以实现 $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 });

使用JQuery与不使用的代码对比

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>

<script type="text/javascript">

// window.onload = function () {

//

var btnObj = document.getElementById("btnId");

//

// alert(btnObj);//[object HTMLButtonElement]

====>>> dom 对象

//

btnObj.onclick = function () {

//

alert("js 原生的单击事件");

//

}

// }

$(function () { // 表示页面加载完成之后，相当 window.onload = function () {}

var $btnObj = $("#btnId"); // 表示按 id 查询标签对象

$btnObj.click(function () { // 绑定单击事件

alert("jQuery 的单击事件");

});

});

</script>

</head>

<body>

<button id="btnId">SayHello</button>

</body>

</html>

JQuery基本用法

dom对象.value = > $(JQuery).val()

dom对象.innerHTML = > $(JQuery).html()

dom对象.innerText => $(JQuery).text()

dom对象.style.属性 = 值;

=> $(JQuery).css(属性名,属性值)

$(JQuery).css("color","red")

$(JQuery).css({属性名:属性值,属性名:属性值})

$(JQuery).css({"color":"red","font-size":"18px"});

JQuery选择器

JQuery语法：$(selector).action()

1.基础选择器

$(""):通配选择器

$("#id")：ID选择器

$(".class"):class选择器

$(".element"):element选择器

$("a,b,c.."):群组选择器

$(".a.b"):并集选择器

$("[href]") 所有带有 href 属性的元素

$("[href='#']") 所有 href 属性的值等于 "#" 的元素

$("[href!='#']") 所有 href 属性的值不等于 "#" 的元素

$("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素

$("[href^='.jpg']") 所有 href 属性的值包含以 ".jpg" 开头的元素

$("[href*='.jpg']") 所有 href 属性的值包含以 ".jpg" 包含的元素 $("E F"): 所有E的后代F的元素 $("E>F"): 所有E的子元素F的元素

$("E+F"): 所有E的相邻兄弟F的元素

$("E~F"): 所有E的兄弟F的元素

$("E:first-child"): 所有第一个子元素E

$("E:first-of-type"): 所有第一个类型元素E

$("E:eq(index)"): 所有第一个类型元素E

*事件函数

click()：点击事件

$(function () {
     $("a").click(function () {
       alert("被点击了");
     });
});

dblclick()：双击事件 change()：域内容被改变

  $("select[name='city']").change(function () {
alert("内容被改变");
  });

focus()：聚焦事件

$(":text").bind('focus',function () {
    $(":text").val("请输入11位电话号码")
})

blur()：失去焦点事件 mouseover()：鼠标移至元素上事件 mouseout()：鼠标从元移开素事件 keydown()：键盘按下

*复合事件 1.bind() 与 on() 向匹配元素附加一个或更多事件处理器.

$(":text").bind({"focus":function () {
    alert("");
    }, "blur":function () {
   alert();
    } });

unbind() 与 off() 从匹配元素移除一个被添加的事件处理器 $(selector).bind({event:function, event:function, ...})

2.delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 undelegate() 从匹配元素移除一个被添加的事件处理器，现在或将来 $(selector).delegate(childSelector,event,data,function)

3.live() 为当前或未来的匹配元素添加一个或多个事件处理器

$("a").live("click",function () {
  alert("触发一下");
});

die() 移除所有通过 live() 函数添加的事件处理程序。 $(selector).live(event,data,function)

4.toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行 $(selector).toggle(function1(),function2(),functionN(),...)

$("button[type='button']").toggle(
    function () {
      $("#box").css("background","red");
    },
    function () {
        $("#box").css("background","blue");
    },
)

wi大太阳

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery知识点总结

4.toggle() 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行 $(selector).toggle(function1(),function2(),functionN(),...)$("[href*='.jpg']") 所有 href 属性的值包含以 ".jpg" 包含的元素 $("E F"): 所有E的后代F的元素 $("E>F"): 所有E的子元素F的元素。$("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素。
复制链接

扫一扫