初识 jQuery

最新推荐文章于 2022-05-02 11:15:12 发布

Angels_Descent

最新推荐文章于 2022-05-02 11:15:12 发布

阅读量199

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Angels_Descent/article/details/93495654

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

@月月鸟

一、了解jQuery

核心理念：write less,do more。

只要JS能做的，它都能做，大大简化了开发代码。

强大的选择器

它支持CSS3的所有选择器，还单独定制了一套高级选择器。
出色的DOM封装

简化且封装了大量的DOM操作。
可靠的事件处理机制

jQ把所有事件都封装了一个个的单独函数。

xxx.onclick = function(){
    
}
xxx.click();

浏览器的兼容性好

jQ封装过程中处理了兼容性问题。jQ 2.0以前的版本兼容IE6 7 8
隐式迭代

很多选择器在使用时无感知的进行了一系列的迭代(遍历)处理。
丰富的插件支持

jQ插件非常丰富，因为jQ大大简化了开发，所以很多开发人员也乐意使用jQ去开发一些JS插件。
对AJAX做了大量封装（了解）

一种异步无刷新的请求技术！

二、掌握jQuery的环境搭建和使用

2.1 环境搭建

下载jQ（可以从jQ官网、jQ插件库网、GitHub）

版本选择：1.12.4或者1.8.3 它们兼容IE 6/7/8

每个版本都会有两种文件选择：开发版(可以直接看到源码，方便调试)、发布版(压缩后文件体积比较小，加载速度快)。
导包(你想使用jQ代码，就需要先引入jQ，必须在你的代码前<自上而下加载代码>)

<script src="jq地址" type="text/javascript" charset="utf-8"></script>

新建一个script标签开始使用

<script type="text/javascript">
    // 页面加载函数
    $(function(){
        alert("Hello jQuery！");
    });
</script>

2.2 原生JS的页面加载函数和jQ的页面加载函数的区别

$(选择器).action();
jQuery().action();

工厂函数的作用：用于将DOM对象或者一系列的jQ支持的语法转换为jQ对象。
$：函数名 等价于jQuery
工厂函数参数：选择器   用于选中具体要进行操作的DOM对象
action：jQ的方法或者属性等...

// $(document)  它可以将DOM对象转换为jQ对象
// read();  jQ的页面加载方法/函数
$(document).ready(function(){});

$(function(){});

2.4 jQ的基本页面操作函数

css() 等价于JS的xxx.style.backgroundColor=xxx;

// 给div设置背景颜色为绿色
// $("#test").css("background-color","green");
// 可以同时设置多个
$("#test").css({
    "background-color":"green",
    "border":"5px solid yellow"
});

addClass() 等价于xxx.className = "xx";

$("#test").addClass("test");

show() 展示等价于xxxx.style.display = block/inline/inline-block;
hide() 隐藏等价于xx.style.display = "none";

// 绑定事件
$("#hide").click(function(){
    // $("#test").hide();
    // $("#test").hide("2000");
    // $("#test").fadeOut("2000");
    $("#test").slideUp("5000");
});
$("#show").click(function(){
    // $("#test").show();
    //	$("#test").fadeIn("3000");
    $("#test").slideDown("5000");
});

2.5 jQ的链式操作

对一个对象进行多重操作，并将操作结果返回给该对象。

2.6 jQ和DOM对象的转换

jQ的函数和DOM的函数属性等都是独立的，不可通用，所以有些时候我们需要进行转换，才能使用对应的一些函数。(忘记了一些函数但记得另一个的函数使用)

// DOM -> jQ
$(DOM对象)
$(document).ready();

var divEle = document.getElementById("test");
$(divEle)

// jQ -> DOM  你可以把一个jQ对象理解为一个数组  $("tr")
$("tr").get(索引);
$("tr")[索引];

3. 掌握jQuery的常用选择器

3.1 基本选择器

同CSS选择器，略。

//  1.点击dt的时候，利用标签选择器将两个<dd>的内容显示
$("dt").click(function(){
    // jQ有隐式迭代
    $("dd").show();
});

// 2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色
$("h1").css("color","blue");

//  3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
$(".price").css({
    "background":"#efefef",
    "padding":"5px"
});

// 4.利用id选择器将id名为author的字体颜色设置为#083499
$("#author").css("color","#083499");

// 5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000
$(".intro,dd,dt").css("color","#ff0000");

// 6.使用全局选择器将所有字体粗细设置为加粗
$("*").css("font-weight","bold");

3.2 层次选择器

// $(".textRight p").css("color","red");
			 
// $(".textRight>p").css("color","red");

// $("h1+p").css("text-decoration","underline");
$("h1~p").css("text-decoration","underline");

3.3 属性选择器

// $("#news a[class]").css("background","#c9cbcb");
			
// $("#news a[class=hot]").css("background","#c9cbcb");
// $("#news a[class!=hot]").css("background","#c9cbcb");
// $("#news a[href^=www]").css("background","#c9cbcb");
// $("#news a[href$=html]").css("background","#c9cbcb");
$("#news a[href*=k2]").css("background","#c9cbcb");

3.4 过滤选择器

基本过滤选择器：

//  1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#ffffff
$(".contain :header").css({
    "background":"#2a65ba",
    "color":"#fff"
});

// 2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none；
$(".contain li:last").css("border-bottom","none");

// 3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202
/*$(".contain li:first").css({
				"font-size":"16px",
				"color":"#e90202"
			});*/

// 4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0
// $(".contain li:even").css("background","#f0f0f0");

// 5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc
// $(".contain li:odd").css("background","#cccccc");

// 6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02
// $(".contain li:lt(2)").css("color","#708b02");

// 7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302
// $(".contain li:gt(3)").css("color","#708b02");

// 8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa
// $(".contain li:eq(2)").css("color","#02acaa");

$(".contain li:not(li:eq(2))").css("color","#02acaa");

可见性过滤选择器：

$("#show").click(function(){
				
    // 将所有隐藏的p都显示出来
    $("p:hidden").show();

});

$("#hide").click(function(){

    $("p:visible").hide();

});

4. 常用事件

1.常用鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

mouseover和mouseenter的区别？

穿过被选元素或其后代元素都会触发对应的mouseover事件。

只有在穿过被选元素时才会触发对应的mouseenter事件。

2.键盘事件

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

<body onkeydown="enterLogin(event)">
    <form action="" method="post">
        帐号：<input type="text" name="username" /><br/>
        密码：<input type="password" name="pwd" /><br/>
        <input type="submit" value="提交"/>
    </form>

    <script type="text/javascript">
        function enterLogin(event){
            // 获取按下的键的键值
            var keyCode = event.keyCode;
            // alert(keyCode);
            if(keyCode == 13){
                // 提交表单
                document.forms[0].submit();
            }
        }
    </script>
</body>

3. 浏览器事件

浏览器事件：resize() 改变浏览器窗口时会触发。 scroll() 浏览器滚动事件

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var x = 0;			
    /*$(window).resize(function(){
				 $(".test").html(++x);
			});*/
    $(window).scroll(function(){
        $(".test").html(++x);
    });
    // $(window).scrollLeft();
    // $(window).scrollTop();
</script>

4.绑定和解绑事件

bind来绑定事件 unbind可以解绑事件

$().bind("事件名",函数);
$().bind({
    "事件名":函数,
    "事件名":函数
});

on绑定事件 off可以解绑事件

5. 常用的复合事件

hover：它等价于mouseover和mouseout事件的组合(其实以前用的是mouseenter和mouseleave

$("#test").hover(function(){
    $(this).css("background","lawngreen");
},function(){
    $(this).css("background","white");
});

toggle：在1.8版本才能使用连续点击事件

$("input").toggle(function(){
    $("body").css("background","yellow");
},function(){
    $("body").css("background","blueviolet");
},function(){
    $("body").css("background","pink");
});

toggle：不带参数

toggleClass：

// 点击按钮 如果div存在 则隐藏  否则显示
/*$("input").click(function(){
		$("#test").toggle(); // 会自动判断
  });*/

$("input").click(function(){
    $("#test").toggleClass("addBd"); // 会自动判断是否有此样式
});

5.常用的DOM操作

CSS-DOM

css();
- css(CSS属性名,CSS属性值); 设置单个效果
- css({ 属性名1:值,属性名2:值 }); 设置多个效果
- css(); 获取某个属性的值
addClass();
- addClass(类属性名);
- addClass(类属性名1 类属性名2); 例如：addClass("test test1 test2")
removeClass();
- removeClass(类属性名);
- removeClass(类属性名1,类属性名2);
toggleClass(); 见上方
hasClass(); 判断是否包含某个类样式

2.2 操作DOM节点(DOM-Core)

HTML代码操作 html() 等价于 xxx.innerHTML
标签内容操作 text() 等价于xxx.innerText

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

属性val的操作

value属性只有在表单元素中才有此属性。

value属性的获取，当初在JS时直接xxx.value

xxx.val(); xxx.val("xx");

创建节点

// JS
var imgEle = document.createElement("img");

// JQ  利用工厂函数  直接可以将HTML字符串加工成对应的节点对象
$("<img src='xxx'/>")

插入节点

语法	功能
append(content)	$(A) . a p p e n d (B) 表示将 B 追加到 A 中如：$ (“ul”).append($newNode1);
appendTo(content)	$(A) . a p p e n d T o (B) 表示把 A 追加到 B 中如：$ newNode1.appendTo(“ul”);
prepend(content)	$(A) . p r e p e n d (B) 表示将 B 前置插入到 A 中如：$ (“ul”). prepend ($newNode1);
prependTo(content)	$(A) . p r e p e n d T o (B) 表示将 A 前置插入到 B 中如：$ newNode1. prependTo (“ul”);

语法	功能
after(content)	$(A) . a f t e r (B) 表示将 B 插入到 A 之后如：$ (“ul”).after($newNode1);
insertAfter(content)	$(A) . i n s e r t A f t e r (B) 表示将 A 插入到 B 之后如：$ newNode1.insertAfter(“ul”);
before(content)	$(A) . b e f o r e (B) 表示将 B 插入至 A 之前如：$ (“ul”).before($newNode1);
insertBefore(content)	$(A) . i n s e r t B e f o r e (B) 表示将 A 插入到 B 之前如：$ newNode1.insertBefore(“ul”);

删除和替换

// 删除元素
// $("#first").remove();
// 清空内容
$("li:first").empty();

// 用自己去替换别人
// $("<img src='images/f03.jpg' id='second'>").replaceAll($("#second"));
// 用别人替换自己
$("#second").replaceWith($("<img src='images/f03.jpg' id='second'>"));

复制节点 clone(boolean) boolean：是否复制事件
设置和获取属性值、删除属性

attr(属性名);  获取对应的属性值
attr(属性名,属性值);  给对应的属性设置值
attr({属性名:属性值,...})  可以同时设置多个
removeAttr(属性名); 删除属性

遍历子节点

childern([选择器]);  可以获取所有的直接子节点  也可以在其中添加选择器获取指定的子节点
find([选择器]); 可以通过它获取后代中的指定节点

遍历兄弟节点

next()
prev()
siblings([选择器]) 获取所有的兄弟节点

遍历父节点

parent(); 直接父节点
parents([选择器]); 获取祖先节点

6. 表单检验

1.1 表单验证的作用

保证用户输入的内容符合我们项目的要求
降低服务器的压力
提升用户的体验

1.2 表单验证的实现思路

程序的入口：事件(表单提交事件onsubmit，失去焦点事件onblur,普通按钮的点击事件onclick,获取焦点事件onfocus,键盘录入事件onkeydown)
程序主体：
1. 获取表单数据（表单的内容是存储在一个value属性中的）
2. 利用字符串等相关方法进行数据验证
3. 通过alert()或者其他的提示方式进行提醒(一般提醒会放在表单元素的右侧或者下侧)
4. 如果是提交事件注意应该将提交拦截！

<body>
    <form action="success.html" method="GET">
        <p>
            帐号： <input type="text" id="" name="username" value="" />
        </p>
        <p>
            密码： <input type="password" name="password"  />
        </p>
        <input type="submit" value="提交"/>
    </form>

    <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        // 1.绑定事件
        // 提交事件是属于表单form的一个事件
        $("form").submit(function(){
            // alert(1);
            // 2.获取数据
            var username = $("input[name=username]").val();
            // alert(username);
            // 3.利用字符串等相关方法进行验证
            if(username == null || username == ""){
                alert("用户名不能为空！");
                // 默认返回true 表示提交表单
                return false;
            }

            return true;
        });

    </script>
</body>

1.3 掌握字符串的常用表单验证方法

trim() 去除两侧空格
indexOf() 获取指定字符的索引
lastIndexOf() 获取指定字符的最后的索引
length 属性获取字符串的长度
charAt() 获取指定索引的字符

7. 正则表达式的基本使用

会写基本的正则表达式

会看基本的正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。使用正则表达式可以用简洁的代码搞定复杂且严谨的验证。

语法：
// 普通方式定义
var reg = /正则的表达式/[附加参数];
// 通过对象的构造来定义
var reg = new RegExp(正则表达式[,附加参数]);

表达式分类和组成：复合模式和简单模式可以混用

简单模式的表达式 var reg = /abc/;
复合模式的表达式 var reg = /[a-z]{6,16}/; 它可以匹配上6-16位的小a-小z
- 元字符例如：[a-z] \d \s \w

在这里插入图片描述

限定符例如：{6,16}

在这里插入图片描述

附加参数：

g：global 全局它对不同方法产生不同的影响

字符串的replace方法如果正则不加g则表示只替换一次如果加了g表示全局匹配替换

i：ignorecase 忽略大小写

m：multiline 多行匹配 m往往要和g搭配使用

常用正则相关方法

正则对象的方法：

exec() 查找匹配的字符串并返回其位置
test() 验证字符串是否和正则匹配

字符串的方法：

match() 查找一个或多个与正则匹配的内容
search() 查找与正则匹配的内容

search()方法不执行全局匹配，它将忽略标志 g，并且总是从字符串的开始进行检索，这意味着它总是返回调用者的第一个匹配的位置。如果找不到返回-1。
replace() 替换与正则匹配的内容
split() 根据正则进行切割字符串切割为数组

8.H5的表单验证特性

.1 H5的表单新属性

required 表示此表单为必填项
placeholder 它会在表单内展示一个提示内容
pattern 和正则结合使用
max 最大值
min 最小值
maxLength
type=“number”
type=“email”
…

.2 H5提供出来的DOM验证操作

var validateState(验证状态对象) = DOM对象.validity; 
validateState.valueMissing
validateState.typeMismatch
我们可以借助下方的这些属性验证当前表单元素的验证状态，根据此状态可以去进行自定义操作。(自定义提示信息)
DOM对象.setCustomValidity(自定义提示信息);

在这里插入图片描述

// DOM对象属性和函数
$("input[type=submit]").click(function(){

    // alert(1);
    var emailEle = $("input[name=email]")[0];
    // 通过validity属性验证是否合法
    if(emailEle.validity.valueMissing){
        emailEle.setCustomValidity("邮箱不能为空！");
    }else if(emailEle.validity.patternMismatch){
        emailEle.setCustomValidity("邮箱格式非法！");
    }else{
        emailEle.setCustomValidity("");
    }

});

以上内容可能会有出入，仅供参考，部分出自转载，欢迎大家踊跃留言指正

Angels_Descent

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识 jQuery

@月月鸟一、了解jQuery核心理念：write less,do more。只要JS能做的，它都能做，大大简化了开发代码。强大的选择器它支持CSS3的所有选择器，还单独定制了一套高级选择器。出色的DOM封装简化且封装了大量的DOM操作。可靠的事件处理机制jQ把所有事件都封装了一个个的单独函数。xxx.onclick = function(){ }x...
复制链接

扫一扫