bootstrap jquery alert_【20201118】jQuery前端框架学习笔记

最新推荐文章于 2024-10-09 15:35:58 发布

weixin_39553757

最新推荐文章于 2024-10-09 15:35:58 发布

阅读量133

点赞数

1. 介绍

1.1 介绍

jQuery是一款非常流行的前端Javascript框架，jQuery相比原生的Javascript要更加简单、更加直观。jQuery除了简化JS代码之外，还提供了一系列的常用属性的获取，常用功能的封装。不仅如此，jQuery还将JS的事件处理封装的更加友好。最重要的是使用jQuery编写JS代码可以忘记各个浏览器之间的差异导致的兼容问题，让我们写起JS代码时候更爽！

jQuery还提供了一种封装方式，可以将一系列JS动态事件封装成为一个独立的控件。可以通过纯JS代码实现HTML的自定义控件目的。

强大的jQuery已经成为了大多数的网页必引入的JS框架，有了jQuery之后老前端工程师不再写原生JS代码，有了jQuery之后新前端工程师不再学原生JS代码。

2. 安装

2.1 下载

2.1.1 官网下载地址

https://jquery.com/download/

发现死活下载不了，换用wget试试？

额，这是什么情况？用npm试试？

终于成功了！

2.1.2 网盘下载地址

这里福哥给出一个网盘的下载地址，如果童鞋们下载不了，又不想(不会)使用npm下载的话，可以使用网盘下载。

链接: https://pan.baidu.com/s/1FrW544KjeqWvfNYP1VkIGw 提取码: m422

2.2 安装

既然jQuery是JS框架所以我们也把它放到js目录下面

安装jQuery很简单，直接通过script标签引入到网页里即可。

<html><head>    <title>jQuery框架演示title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <script type="text/javascript" src="server->BASE_URI %>js/jquery.min.js">script>head><body>body>html>

3. 使用

3.1 选择器

在原生JS里定位一个元素需要使用document.getElementById、document.getElementsByClassName、document.getElementsByName、document.getElementsByTagName、document.querySelector等等这些方法，而JQ里可以使用选择器定位元素。

原生

class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;"> <div class="col-sm-12"> <h3 class="m-t-none m-b">登录h3> <p>请输入正确的用户名和密码。p> <form name="form" class="form"> <div class="form-group"> <label>用户名label> <input type="text" name="user" class="form-control" /> div> <div class="form-group"> <label>密码label> <input type="password" name="pass" class="form-control" /> div> <div> <button class="btn btn-primary">登录button> div> form> div>div><script> var form = document.getElementsByClassName('form'); var text = document.getElementsByName('user'); var button = document.getElementsByTagName('button'); form[0].onsubmit=function () { alert('你好，'+document.getElementsByName('user')[0].value+'！'); return false; }; text[0].value = '鬼谷子叔叔'; setTimeout(function () { button[0].click(); });script>

jQuery

class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;"> <div class="col-sm-12"> <h3 class="m-t-none m-b">登录h3> <p>请输入正确的用户名和密码。p> <form name="form" class="form"> <div class="form-group"> <label>用户名label> <input type="text" name="user" class="form-control" /> div> <div class="form-group"> <label>密码label> <input type="password" name="pass" class="form-control" /> div> <div> <button class="btn btn-primary">登录button> div> form> div>div><script> var form = $('.form'); var text = $('[name="user"]'); var button = $('button'); form.bind('submit',function () { alert('你好，'+$('[name="user"]').val()+'！'); return false; }); text.val('鬼谷子叔叔'); setTimeout(function () { button.click(); });script>

`3.2 样式修改`

使用原生JS修改元素的样式需要通过style这个集合，而JQ可以通过css方法完成一个或者多个样式的修改操作。

原生

<script>    $('[name="user"]').css({        backgroundColor:'#ccc',        color:'#ff6600',        fontSize:'16px'    }).val('鬼谷子叔叔');script>

jQuery

<script>    var user = document.getElementsByName('user');    user[0].style.backgroundColor = '#ccc';    user[0].style.color = '#ff6600';    user[0].style.fontSize = '16px';    user[0].value = '鬼谷子叔叔';script>

`3.3 事件绑定`

使用JQ的事件绑定可以大大简化编写代码的复杂程度，这里面原生JS的实现方法是通过addEventListener和removeEventListener函数实现，在JQ里换成了bind和unbind方法。

绑定事件

var user = $('[name="user"]');user.val('鬼谷子叔叔');user.bind('focus',function () {    $(this).css({color:'blue'});});user.bind('blur',function () {    $(this).css({color:'black'});});

清除单个事件

var user = $('[name="user"]');user.unbind('focus');user.unbind('blur');清除全部事件var user = $('[name="user"]');user.unbind();

`4. 总结`

今天童鞋们和福哥一起学习了jQuery框架的基本使用技巧，这里面只包括jQuery的元素选择、属性修改、事件绑定这些基本操作，后面福哥再专门开课教给大家使用jQuery开发自定义的控件。

【20201117】Bootstrap前端框架学习笔记

【20201116】HTML语言入门——标签样式

免费看文章，自己学技术

每一篇文章都是福哥一个字一个字地敲出来的，都是福哥原创的。

每一篇文章都是经过了福哥的反复验证的，都是可以正常使用的。