jQuery概要

更新时间:2020-01-06 10:56:53 点击次数:1366次
一、简介
1、什么是jQuery
JavaScript的框架,是一套工具库。简化了JavaScript的功能实现。可以使得开发者写更少的代码,却做更多的事-write less do more。

JQuery是一个工具库,是对JS的代码进行了一次封装

JS代码和JQuery代码对比:

JS:
通过js来获取页面上的一个div:
document.getElementById("d1")
JQuery:
通过JQ来获取页面上的一个div:
$("#d1")

2、jQuery功能
jQuery库包含以下功能:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
3、安装
有两个版本的 jQuery 可供下载:

Production version - 用于实际的网站中,已被精简和压缩。 jquery-1.8.3.js
Development version - 用于测试和开发(未压缩,是可读的代码) jquery-1.8.3.min.js
<head> 
<script src="jquery-1.10.2.min.js"></script>    <!--引用jquery库-->
</head> 

4、初识jQuery
<head>
<title>初识jQuery</title>
<meta charset="utf-8">
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
        function myclick()
        {
            $("#pid").hide()   //获取id为pid的标签,并将其隐藏
        }
</script>
</head>

<body>
<p id="pid">做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
<input type="button" name="" value="点击" onclick="myclick()">
</body>

二、jQuery选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。

jQuery 中所有选择器都以美元符号开头:$()。

1、基本选择器
1.1 元素选择器
$("p").hide();       // 所有的p标签都被隐藏

1.2 #id选择器
$("#test");         //id值为test的标签

1.3 .class选择器
$(".test");         //类名为test的标签

1.4 *全选择器
$("*");             //所有的标签,全文档

1.5 多选择器共用
var p = $("p.pc")        //p标签且类名为pc的标签

var p = $("p#pid")        //p标签且id为pid的标签

var p = $("div p")         //div标签下的p标签

var p = $("div,p")         //多个标签同时获取,用逗号分隔

1.6 jQuery对象与DOM对象区别
DOM获取元素:

document.getElement...(xxx)  //返回DOM对象

jQuery获取元素:

$("xxx")                     //返回jQuery对象

都是对一个或多个标签的封装,都指向一个或多个标签,只是支持的功能不一样,DOM对象和Jquery对象都有各自的方法

jQuery对象与DOM对象相互转换

DOM --> jQuery

var div = document.getElementById("div_1");   //DOM对象

var div_jq = $(div)        //jquery对象

jQuery --> DOM

var div = $(div)        //jquery对象

var div = div.get(0)      //DOM对象

var div  = div[0]          //DOM对象

2、层级选择器
2.1 后代选择器
$(“selector1 selector2”) 中间有空格

$("div .a");            //选择所有的div,其中样式类为a的后代
$("div .a input");      //选择所有的div,其中样式类为a的后代,再选择这些后代的input后代标签

2.2 父子选择器
$(“selector1 > selector2”); 中间为大于号

$("span > input");   //所有的span的input子标签

$("div span>input"); //所有的div下的span的input子标签

2.3 后续紧邻兄弟
$(“selector1+selector2”) 中间为加号

$("div+p") ;  //紧邻div的p标签

$("div+p+input")  //紧邻div的p标签紧邻的input标签

2.4 后续所有兄弟
$(“selector1~selector2”) 中间为破折号

$("div~p") ;  //紧邻div后的所有p标签

3、基本过滤选择器
:first 选出匹配到的标签中的第一个标签
var p = $("div>b>p:first")
p.hide()                       //将div下的b标签下的第一个p标签隐藏


<div>
<b >
<p id="pid" class="a">1.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
<p id="pid2">2.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
</b>
</div>

:last 选出匹配到的标签中的最后一个标签
$("div>p:last")   //div标签下的所有p标签中的第一个

:eq(index) 选出对应index索引值的标签 index从0开始
$("div>p:eq(1)")    //div下的所有p标签中 索引值为1的标签

:gt(index) 选出索引大于index的元素
$("div>input:gt(1)");  //div下所有input子标签中索引大于1的

:lt(index) 选出索引小于index的元素
$("div>input:lt(1)");//div下所有input子标签中索引小于1的

:odd 选出索引值为奇数的元素
$("div>input:odd");//div下所有input子标签中索引为1,3,5..的

:even 选出索引值为偶数的元素

$("div>input:odd");//div下所有input子标签中索引为2,4,6..的

:not(selector) 选出selector不能匹配到的元素
$("div>input:not(.a)");  //div下所有input子标签中样式类名不是a的 
$("#abc>li:not(#a)");    //id为abc的标签下的li子标签中id不是a的
$("#abc>li:not(:eq(2))");//id为abc的标签下的li子标签中索引不是2的

4、内容过滤选择器 (了解)
:contains 模糊匹配 (自己含有,或后代含有)
$("div:contains('2')")   div或div下内容包括2的标签

:empty 没有内容的标签
 $("p:empty")  //没有内容的p标签

:parent 包含子元素或文本内容
$("p:parent")   //有文本内容或子标签的p标签

:has(selector) 拥有某种后代的标签
$("div:has('p')")   //有p标签的div标签

5、属性过滤选择器
$("[name]") 有name属性的
$("[name='zhj']") name属性值为zhj的
$("[value='male']") value属性值为male的
$("[type='text']") type属性值为text的
$("div[name='abc']");               //div标签且name为abc

6、可见性过滤选择器
:visible 可见元素
:hidden 隐藏元素
<script type="text/javascript">
    function myclick()
    {
    $("div p:empty").hide();
    console.log($("div p:visible")); 
    }
</script>

<div>
<p id="pid" class="a">1.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
<p id="pid2">2.做一个决定,并不难,难的是付诸行动,并且坚持到底。</p>
<p></p>
</div>

<input type="button" name="" value="点击" onclick="myclick()">

7、表单选择器
:input 所有的input元素
:checked 适用于单选按钮 和 复选框
:selected 适用于下拉框
jQuery对象遍历

var plist = $(":input");
for(var i = 0; i<plist.size();i++)
{
    var pd = plist.get(i);      //DOM对象
    var pq = plist.eq(i);       //jquery对象
    console.log($(pd).val());
    console.log(pq.val());
}

或者

var ps = $("div p");
ps.each(function(i){    //i为循环变量 0,1,2...
  console.log(this)   //this为当前遍历到的每一个DOM对象
});

三、jQuery事件
1、事件注册的方式
基于标签:和之前JS中使用方式一致,Jquery未加干涉
基于编程:Jquery提供了全新的API
$(document).ready(function(){
$("#btn_1").click(function(event){        
console.log($(this).val());           //this为当前触发事件的标签的DOM对象
console.log(this.value);
})
})

Ready事件

等价于onload的作用,用于保证代码的执行在页面加载之后

$(document).ready(function(){...});
$(function(){...})   //简写

2、jQuery事件函数
鼠标事件 键盘事件 表单事件
click() keypress() submit()
dblclick() keydown() change()
mouseover() keyup() focus()
mousemove() blur()
mouseout()
toggle()
hover()
//toggle开关 示例
$(function(){
$("#btn_1").toggle(function(){
console.log('abc')
$("#pid").hide()
},
function(){
$("#pid").show()
})
})

//hover鼠标复合函数
$(function(){
$("#div_1").hover(function(){             //mouseover时触发
this.style.backgroundColor = 'blue';
},
function(){                               //mouseout时触发
$(this).css({"background-color":"green"});
})
})

四、jQuery DOM
jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

1、获取内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
<script >
$(function(){
$("#btn").click(function(){
var pe = $("div");
var text = pe.text();         //获得标签文本内容
console.log(text);    

var html = pe.html();          //获取标签内容(包括HTML标记)
console.log(html);

console.log($(this).val());     //表单value
            
            $(this).val("不要点我");    //修改value值  -- 通过参数  上同
})
})

</script>

<div>abc
<p id="pid" class="a">
1.做一个决定,并不难,难的是付诸行动,并且坚持到底。
</p>
</div>

<input type="button" value="点我" id="btn">

2、获取属性
jQuery attr() 方法用于获取属性值。

attr("属性名") 获取属性名
attr("属性名","属性值") 设置属性值
attr({属性名1:属性值, 属性名2:属性值,...}) 一次设置多个属性值
removeAttr("属性名") 删除标签的属性
prop 和attr使用一致,作用一致;但prop在获取bool类型属性时(checkd,selected)更友好
$(function(){
$(":input").click(function(){
var attr =  $("a").attr("href");   //获取href属性值
console.log(attr);

  $("a").attr("href","http://www.baidu.com"); //修改href属性值
 })

})

<a href="http://www.baizhiedu.com" style="text-decoration: none" target="_blank">百知教育</a>
<input type="button" value="点我">

3、添加元素
append() - 在被选元素最后一个位置插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<script >
$(function(){
$("#btn").click(function(){
$("#div_1").append("<p>通过 jQuery,可以很容易地添加新元素/内容。</p>")
})
})
</script>

<div id="div_1">
abc
</div>
<input type="button" value="添加" id="btn">

4、删除元素
remove() - 删除被选元素(及其子元素)
empty() - 清空元素内容
5、jQuery CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
通过添加class实现 当点击button时将div的文本颜色改为blue,字体改为120px。

<!--样式表-->
<style type="text/css">
.blue{
color: blue;
font-size: 120px;
}
</style>

<!--jquery代码-->
<script>
$(function(){
$("#btn").click(function(){
$("#div_1").addClass("blue")
})
})
</script>

<!--HTML-->
<div id="div_1">
这是一个文本
</div>
<input type="button" value="添加" id="btn">

6、css( )方法
css() 方法设置或返回被选元素的一个或多个样式属性。

css("样式属性名") 获取样式属性值
css("样式属性名","样式属性值") 设置样式属性值
css({"样式属性名1":"样式属性值","样式属性名2":"样式属性值",..}) 设置多个样式属性值
$("#div_1").css("color","blue");          //设置css样式属性值
console.log($("#div_1").css("color"));    //获取css样式属性值
$("#div_1").css({"background-color":"blue","color":"white","font-size":"50px"}); //一次设置多个属性

补充:

使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

$(document).ready(function(){
  $("p").on("click",function(){
    ...
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!