jQuery

时间：2020-03-31 01:02:12 阅读：88 评论：0 收藏：0 [点我收藏+]

什么是jQuery？

　　对原生js的封装

jQuery的优势：

一款轻量级的JS框架。jQuery核心文件才几十kb，不会影响页面的加载速度。
丰富的DOM选择器，jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了ajax操作，后端只需返回一个JSON格式的字符串就能完成与前端得通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果更炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery内容：

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

jquery下载地址：https://jquery.com/download/

jQuery API中文文档地址：https://www.94xh.com/

在HTML文档中引入和使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery介绍</title>
    
</head>
<body>


<script src="jquery.js"></script>   /*引入jquery*/

<script>
<!--    写jquery代码-->
</script>

</body>
</html>

jquery对象和dom对象：

jquery找到的标签对象称为jquery对象。
dom找到的标签对象称为dom对象。
jquery对象只能使用jquery方法，不能使用dom方法。
dom对象只能使用dom方法，不能使用jquery方法。

jquery对象和dom对象互相转换：

dom对象转jquery对象：$(dom对象)；
jquery对象转换为dom对象：jquery对象[0] ； 0是索引。

jQuery基础语法：

$(‘selector‘).action() --->$(selector)找到某个标签，..action()通过这个标签对象调用它的一些方法。

$(‘#d1‘).text(‘大家好‘);

查找标签

　　jquery基本选择器（同css）

　　　　id选择器：$(‘#d1‘) 找到id值为d1的标签

　　　　标签选择器：$(‘div‘) 找到所有div标签

　　　　类值选择器：$(‘.c1‘) 找到class属性值为c1的标签

　　　　配合使用：$(‘div.c1‘) 找到class属性值为c1的div标签

　　　　所有元素选择器：$(‘*‘) 找到所有标签

　　　　组合选择器：$(‘#id,classname,tagname‘)

　　选择器找到可能是多个标签，会放到数组里面，即便是个数组它也是个jquery对象。能够直接使用jquery对象的方法，意思是对找到的所有标签进行统一设置，如果单独设置选中的所有标签中的某个标签，可以通过索引取值的方式找到，然后注意，通过索引取值拿到的标签是个dom对象。

　　jquery选择器之层级选择器：（同css）

　　　　x和y可以为任意选择器

　　　　　　$(‘x y‘) x的所有后代子孙y（子子孙孙）

　　　　　　$(‘x > y‘) x的所有儿子y

　　　　　　$(‘x + y‘) 找到所有紧挨在x后面的y

　　　　　　$(‘x ~ y‘) x之后所有的兄弟

基本筛选器（选择之后进行过滤）

　　基本筛选器怎么用？就在选择器里面用！

<body>
<ul type="none">
    <li>python</li>
    <li>java</li>
    <li>php</li>
    <li>go</li>
    <li>c++</li>
    <li>c</li>
</ul>

<script src="jquery.js"></script>
<script>
    console.log($(‘li‘));
    console.log($(‘li:first‘));       //找第一个
    console.log($(‘li:last‘));　　　　 //找最后一个
</script>
</body>

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筛选器</title>
</head>
<body>
<ul type="none">
    <li>python</li>
    <li>java</li>
    <li id="l3">php</li>
    <li><span>go</span></li>
    <li id="l5">
        <a href="" id="a1" class="c1">c++</a>
    </li>
    <li>c</li>
</ul>

<script src="jquery.js"></script>
<script>
    console.log($(‘li‘));
    console.log($(‘li:first‘));
    console.log($(‘li:last‘));
    console.log($(‘li:eq(2)‘));
    console.log($(‘li:eq(-2)‘));
    console.log($(‘li:odd‘));
    console.log($(‘li:even‘));
    console.log($(‘li:gt(3)‘));
    console.log($(‘li:lt(3)‘));
    console.log($(‘li:not(#l3)‘));
    console.log($(‘li:has(span)‘));
    
    console.log($(‘li:has(a)‘));
    console.log($(‘li:has(#a1)‘));
    console.log($(‘li:has(.c1)‘));
</script>
</body>
</html>

代码演示

技术分享图片

属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>

<div title="python">python入门</div>
<div id="nav">导航栏</div>
<div class="title_left">左侧悬浮</div>


<label for="username">用户名</label>
<input type="text" id="username">
<label for="pwd">密码</label>
<input type="password" id="pwd">
<label for="check_user">检验</label>
<input type="checkbox" id="check_user">


</body>


<script src="jquery.js"></script>
<script>
    console.log($(‘[title]‘));
    console.log($(‘[title=python]‘));

    console.log($(‘input[type=checkbox]‘));
    console.log($(‘[type=text]‘));

</script>
</html>

View Code

表单筛选器（多用于找form表单里出现的input标签，当然通过属性选择器找肯定也是没有问题的，这样就是写着简单一点）：

jQuery

原文：https://www.cnblogs.com/zhangrenguo/p/12602125.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)