一、在html中添加jquery,可以使用cdn加载jquery
1、网址:https://www.bootcdn.cn/jquery/
2、推荐使用3.4左右版本的,建议使用min.js后缀的,min后缀是压缩过的,体积比较小
//注册窗口注册是如果输入内容为空则提示内容为空
//设置属性,根据.attr(‘属性名’)获取对应的值,当输入一个值的时候是获取对应的值,两个值的是都是添加值
20岁超过30岁,40岁,50岁
衣锦还乡
技多不压身
$('#d1');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]
$("#d1").attr('id');
"d1"
$("#d1").attr('username','yzn');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]0: p#d1length: 1__proto__: Object(0)
$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]
//移除设置好的设置好的标签
$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]
删除已经添加好的标签
$('#d1').removeAttr('test');
使用prop4获取类似于checked的标签属性
20岁超越30岁,40岁,50岁的人
衣锦还乡
技多不压身
读书
写字
吹牛逼
//根据返回值获取checked的标签属性,返回true或false
添加新的标签,插入数据
var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$divEle.append(pEel);
//在div标签里面最底部添加一个p标签
添加新的标签
var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$(pEel).appendTo($divEle);
添加标签到指定div标签内部头
var pEle=document.createElement('p');
undefined
pEle.innerText='谦虚';
"谦虚"
var $divEle=$('div');
undefined
$divEle.prepend(pEle);
新建标签放在指定标签的前面:before
var pEel=document.createElement('p');
undefined
pEel.innerText='淡定,切勿浮躁!!!';
"淡定,切勿浮躁!!!"
var $divEle=$('div');
undefined
$divEle.before(pEel);
新建标签替换创建好的标签
var pEel=document.createElement('p');
undefined
pEel.innerText='坚持就是胜利,坚持就是胜利';
"坚持就是胜利,坚持就是胜利"
var $divEle=$('div');
undefined
$divEle.replaceWith(pEel);
克隆新的功能
鼠标悬停触发事件
欢迎光临
获取用户在input框中输入的实时内容
取消标签自带的事件(input点击按钮会出现页面刷新)
事件冒泡(鼠标点击在设置好的标签内容上触发绑定事件)
div下的p div下的p下的span
事件冒泡(点击按钮,触发对应事件)
设置图片前台展示动态效果
//图片虚化收缩左上角
$('img').hide(3000);
//图片虚化从左上角展示出来
$('img').show(3000);
//=========================
//图片收缩到左上角
$('img').slideDown(5000)
//图片从左上角展示出来
$('img').slideUp(5000)
//图片原地渐变显示出来
$('img').fadeIn(5000)
//图片原地渐变隐藏
$('img').fadeOut(5000)
//图片原地变淡,
$('img').fadeTo(5000,0.4)
eachx循环
标签可以当做数据存储库
//往p标签中添加数据
$('p').data('username','json');
//查看数据,一个值是查看数据,两个值是新增数据
$('p').data('username');
在html代码中查看不到新增的数据的
Bootstrap:是一个前端框架
使用前提:到如bootstrap需要先导入jquery,对jquery有依赖
手机扫一扫
移动阅读更方便
你可能感兴趣的文章