jQuery使用示例详解

【jquery引用字段】

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>Title</title>
</head>
<body><div id="MyDiv" class="myClass"><p></p></div><input type="button" name="username" /><!--引用jQuery文件--><script src="js/jquery-1.8.3.js"></script><script>//id选择器:查找id为MyDiv的标签
        $('#MyDiv').//标签选择器：查找所有的div标签
        $('div').//class选择器：查找所有class为myClass的标签
        $('.myClass')//层级选择器：div标签下的p标签
        $('div p')//查找input标签name等于username，并且属性值为button的标签
        $('input[name="username"]').attr('button',true)</script>
</body>
</html>

jquery字段引用说明

【jquery字段参数】

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>Title</title>
</head>
<body><div id="MyDiv" class="myClass">123<a>hello</a></div><input name="username" type="text" value="9999" /><input type="checkbox" /><!--引用jQuery文件--><script src="js/jquery-1.8.3.js"></script><script>//加参数是赋值，不加参数是取值
        $('#MyDiv').text;  //获取id为MyDiv的文本内容----123
        $('#MyDiv').text('haha');    //为id为MyDiv的标签添加文本内容
        $('#MyDiv').html;  //获取id为MyDiv的html内容----<a>hello</a>
        $('#MyDiv').html('<p>hehe</p>');  //为id为MyDiv的标签添加html内容
        $('input[name="username"]').val  //获取name为username的input标签的value值
        $('input[name="username"]').val('sb')  //为name为username的input标签的value赋值
$('input[name="username"]').attr('name')   //获取name为username的input标签的name属性的值
        $('input[name="username"]').attr('name','Macoli')  //修改name为username的input标签的name属性的值为Macoli
$('input[type="checkbox"]').prop('checked',true)   //选中所有的复选框（true为选中，fals为不选中，默认不选中）
        $('input[type="checkbox"]').prop('disabled',true)  //禁用所有的复选框（true为禁用，false为不禁用，默认不禁用）</script>
</body>
</html>

jquery字段参数操作说明

【jquery给html标签添加css】

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>Title</title><style>.c1{border: 1px solid red;}.c2{font-size: 50px;}</style>
</head>
<body><div id="MyDiv" class="c1">hello</div><input type="button" value="点击" onclick="Foo()" /><p>hello</p><!--引用jQuery文件--><script src="js/jquery-1.8.3.js"></script><script>//给p标签设置css
        $('p').css({'color':'red','font-size':'50px'});function Foo() {$('.c1').toggleClass('c2');  //每次执行的时候交替添加、删除c2
        }//$('.c1').addClass('c2');  //为所有class为c1的标签再加一个c2的class（c1和c2同时存在）</script>
</body>
</html>

jquery给html标签添加css

【jquery常用函数】

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>Title</title><style>.returnTop{position: fixed;width: 32px;height: 35px;right: 20px;bottom: 20px;background-color: red;color: white;}.hide{display: none;}</style>
</head>
<body><!--返回顶部功能实现--><!--<div id="return_top" class="returnTop hide" οnclick="Go()">返回顶部</div>--><div id="return_top" class="returnTop hide">返回顶部</div><div style="height: 10000px"></div><!--引用jQuery文件--><script src="js/jquery-1.8.3.js"></script><script>//当页面框架加载完成后，默认执行该函数
        $(function () {$('#return_top').click(function () {$(window).scrollTop(0);   //设置页面返回顶部
            })})//当页面滚动条变化时，执行的函数（每滚动一次，函数就执行一次）
        $(window).scroll(function () {var height = $(window).scrollTop();   //获取滚动条离顶部的距离if (height>0){//显示返回顶部图标（或文字）
                $('#return_top').removeClass('hide');   //去除hide
            }else {//隐藏返回顶部图标（或文字）
                $('#return_top').addClass('hide');}})/*function Go() {$(window).scrollTop(0)   //设置页面返回顶部}*/</script>
</body>
</html>

页面加载完成后执行的函数和返回顶部函数

【jquery添加删除内容】

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><title>Title</title><style></style>
</head>
<body><p>I would like to say:<span></span></p><input type="button" value="追加1" id="addid1" /><input type="button" value="追加2" id="addid2" /><!--引用jQuery文件--><script src="js/jquery-1.8.3.js"></script><script>//append():内容后面追加  prepend():内容前面追加//appendto(content):把标签追加到content中（参数content也是一个标签，可以自定义）//empty():清空标签的所有内容(标签还在)//remove():删除标签（包括内容）//页面框架加载完成后执行的函数
        $(function () {$('#addid1,#addid2').click(function () {//获取当前点击的标签Idvar currentId = $(this).attr('id')if (currentId=='addid1') {//$('p').append('Alex&nbsp;');   //往p标签中追加内容
                    $('p span').text('Alex');   //往p标签下的span标签中添加内容
                }else if (currentId=='addid2'){//$('p').append('Macoli&nbsp;');   //往p标签中追加内容
                    $('p span').text('Macoli');  //往p标签下的span标签中添加内容
                }})})</script>
</body>
</html>

jquery添加、删除内容

【jquery操作元素焦点】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js</title><style>.gray{color: gray;}.black{color: black;}</style>
</head>
<body><!--事件：onblur()：元素失去焦点   onfocus()：元素获得焦点--><input type="text" class="gray" id="tip" value="请输入关键字" /><script src="js/jquery-1.8.3.js"></script><script>//页面框架加载完成后执行的函数
        $(function () {//获取焦点
            $('#tip').focus(function () {var id = $(this);id.addClass('black');if (id.val()=='请输入关键字'||id.val().trim()=='') {  //trim()函数：清除字符串的空格
                    id.val('');}})//失去焦点
            $('#tip').blur(function () {var id = $(this);var val = id.val();if (val.length==0||val.trim()==''){id.val('请输入关键字');id.addclass('gray');}else {id.adclass('black');}})})</script>
</body>
</html>

jquery获取、释放元素焦点

【jquery操作多选框的全选、不选、反选功能】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js</title></head>
<body><!--设置全选、不选、反选选项功能--><div id="checklist"><input type="checkbox" value="1" />篮球<input type="checkbox" value="2" />足球<input type="checkbox" value="3" />羽毛球</div><input type="button" value="全选" id="selectAll" /><input type="button" value="不选" id="unselectAll" /><input type="button" value="反选" id="reverseAll" /><script src="js/jquery-1.8.3.js"></script><script type="text/javascript">//页面框架加载完成后执行的函数
        $(function () {$('#selectAll').click(function () {//:checkbox和input[type=='checkbox']等价//$('#changelist :checkbox').attr('checked',true);
                $('#checklist input[type="checkbox"]').attr('checked',true);})$('#unselectAll').click(function () {$('#checklist :checkbox').attr('checked',false);})$('#reverseAll').click(function () {//反选//each：循环个标签，每个标签都执行函数
                $('#checklist :checkbox').each(function () {//获取标签是否被选中的信息，如果被选中，设置为取消选中；如果没被选中，设置为选中
                    $(this).attr('checked',!$(this).attr('checked'));})})})</script>
</body>
</html>

jquery操作多选框的全选、不选、反选功能

【jquery操作菜单，选中菜单才显示子菜单】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js</title><link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css"><style>.hide{display: none;}</style>
</head>
<body><!--菜单选中显示子菜单，不选中不显示功能--><div class="container"><div><div class="title">Menu1<i class="fa fa-beer" aria-hidden="true"></i></div><div class="body hide"><a href="">content1</a><br/><a href="">content2</a><br/><a href="">content3</a></div></div><div><div class="title">Menu2<i class="fa fa-pencil-square-o" aria-hidden="true"></i></div><div class="body hide"><a href="">content1</a><br/><a href="">content2</a><br/><a href="">content3</a><br/></div></div></div><script src="js/jquery-1.8.3.js"></script><script type="text/javascript">//页面框架加载完成后执行的函数
        $(function () {$('.title').click(function () {//当前标签的父标签的其他平级标签的class为body的子标签添加hide
                $(this).parent().siblings().children('.body').addClass('hide')//去掉当前标签的下一个标签的hide
                $(this).next().removeClass('hide')})})</script>
</body>
</html>

jquery操作菜单，选中菜单才显示子菜单

【jquery选中不同标签显示不同内容】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js</title><link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css"><style>li{float: left;list-style: none;margin-right: 10px;}.current{background-color: wheat;}.hide{display: none;}</style>
</head>
<body><div class="container"><div class="tab-menu-box1"><div class="menu"><ul id="tab-menu-title" style="overflow: hidden;"><li class="current" content-to="1">价格趋势</li><li content-to="2">市场分析</li><li content-to="3">其他</li></ul></div><div id="tab-menu-body" class="content"><div content="1">content1</div><div content="2" class="hide">content2</div><div content="3" class="hide">content3</div></div></div></div><script src="js/jquery-1.8.3.js"></script><script type="text/javascript">//页面框架加载完成后执行的函数
        $(function () {ChangeTab('#tab-menu-title','#tab-menu-body');})function ChangeTab(title,body) {$(title).children().click(function () {var $menu = $(this);var contentvalue = $(this).attr('content-to');var $content = $(body).find('div[content="' + contentvalue + '"]');$menu.addClass('current').siblings().removeClass('current');$content.removeClass('hide').siblings().addClass('hide')})}</script>
</body>
</html>

View Codejquery选中不同标签显示不同内容

【jquery使滚动条一直处于底部】

<!--chat-message是标签的class名-->
$('.chat-message').scrollTop($('.chat-message')[0].scrollHeight);

转载于:https://www.cnblogs.com/MacoLee/p/5888833.html

jQuery使用示例详解相关推荐

html注册验证radio,html中radio值的获取、赋值、注册事件示例详解分享
1,radio分组只要name一样,就是一组的,即一组中只能选择一个,如下: 复制代码代码如下: group1: radio1 radio2 radio3 group2: radio4 radio5 ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
python中3or5什么意思_示例详解Python3 or Python2 两者之间的差异
每门编程语言在发布更新之后,主要版本之间都会发生很大的变化. 在本文中,Vinodh Kumar 通过示例解释了 Python 2 和 Python 3 之间的一些重大差异,以帮助说明语言的变化. 本 ...
php reactphp wss_workerman的基本用法（示例详解）
workerman是什么? Workerman是一个异步事件驱动的PHP框架,具有高性能,可轻松构建快速,可扩展的网络应用程序.支持HTTP,Websocket,SSL和其他自定义协议.支持libev ...
python的用途实例-python assert的用处示例详解
使用assert断言是学习python一个非常好的习惯,python assert 断言句语格式及用法很简单.在没完善一个程序之前,我们不知道程序在哪里会出错,与其让它在运行最崩溃,不如在出现错误条件 ...
[zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
线性代数带参数的线性方程组的求法示例详解
线性方程组的求法与示例详解线性方程组由n个1维未知量,m个方程组成的组合叫做线性方程组. 特别的当方程组右边的值全都是0时叫做齐次线性方程组. 增广矩阵在系数矩阵的右边添上一列,该列由线性方程组 ...
python动态生成数据库表_Python-Flask:动态创建表的示例详解
今天小编从项目的实际出发,由于项目某一个表的数据达到好几十万条,此时数据的增删查改会很慢:为了增加提高访问的速度,我们引入动态创建表. 代码如下: from app_factory import ap ...
java网络编程阻塞_Java网络编程由浅入深三一文了解非阻塞通信的图文代码示例详解...
本文详细介绍组成非阻塞通信的几大类:Buffer.Channel.Selector.SelectionKey 非阻塞通信的流程ServerSocketChannel通过open方法获取ServerSo ...

jQuery使用示例详解

jQuery使用示例详解相关推荐

最新文章

热门文章