jQuery系列
关注
分享
扫一扫
_dalianmiao
这个作者很懒，什么都没留下…
展开
-
JQuery_绑定事件
绑定： 绑定事件：一.如何给元素同时绑定两个事件？ 方法一： 链式编程$('button').click(function(){ alert('我是click事件！')}).mouseenter(function(){ alert('我是mouseenter事件！')})方法二： 用bind绑定事件：事件之间用空格隔开//bind绑定两个事件$('butt...原创 2018-06-26 10:24:52 · 134 阅读 · 0 评论 -
jQuery_基本选择器
一.CSS选择器：#id            id选择器             #id{color:red}.class &nbsp原创 2018-06-24 14:13:05 · 4703 阅读 · 0 评论 -
jQuery_选择器超详细
一.基本选择器 1. $(“#demo”) ： 选择 id为demo的第一个元素 $("#demo").css('background','black"); //有多个只选择第一个 2.$(“.item”): 选择所有class为item的元素 $(".item").css('background','black&原创 2018-06-24 15:02:38 · 282 阅读 · 0 评论 -
jQuery_css 的详细用法
一.设置CSS属性1.给元素设置一个CSS属性：$("#id").css('background','black")2.如果设置多个属性样式呢？$("#id").css({'background':'black"，“font-size”:'14px'})3.设置样式,可以根据自己的意愿来设置。$("li").css('font-s原创 2018-06-24 15:12:47 · 359 阅读 · 0 评论 -
jQuery 对象和DOM对象相互转换
DOM对象与jQuery对象的相互转换DOM—-> jquery对象：对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) ： Var a=document.getElementById(“form”); $a=$(a);// 通过对象转换后$a就成为了封装的jQuery对象，可以调用jQuery封...原创 2018-06-24 15:18:42 · 175 阅读 · 0 评论 -
jQuery_常用DOM操作
1.attr() 属性设置属性：$("input").attr('value','按钮');获取属性：$("input").attr('type'); 只有一个参数，与css相似移除属性：$("input").removeAttr('value");2.值 val()设置值：$(&quo原创 2018-06-25 09:25:35 · 554 阅读 · 0 评论 -
jQuery_节点操作
一.内部插入节点$('div').append(node); //在div内部的后面追加元素node.appendTo($('div')); //把node追加到div内部的后面$('div').prepend(node); //在div内部的前面追加元素node.prependTo($('div')); //把node追加到div内部的前面eg: $('div')....原创 2018-06-25 09:32:50 · 209 阅读 · 0 评论 -
jQuery_动画
一.基本动画show() hide() 第一个参数：动画时长，可以是数字或者字符串，数字用毫秒表示，字符串只能为：“slow”，‘“normal”’，“fast”第二个参数：动画完成后的要执行的函数。第三个参数：指的是切换的效果，默认的是“swing”，可用的参数是‘’“linear”eg：$(document).ready(function () { $("div")...原创 2018-06-25 09:38:31 · 159 阅读 · 0 评论 -
jQuery_元素操作
一.高度和宽度获取高度： $("div").height(); // 高度 $("div").width(); //宽度设置高度： $("div").height(300); $("div").height(“300px”);原创 2018-06-25 09:52:45 · 693 阅读 · 0 评论 -
jQuery实战_下拉菜单的实现
mouseover事件和mouseenter 事件的区别 mouseove事件会触发多次，每遇到一个子元素就会触发一次。 mouseenter 事件只会触发一次。鼠标经过的时候只会触发一次 实例下拉菜单的实现： 方法一：（常规） 结构： JS：$(document).ready(function(){ $('.box li').mouseenter(function(...原创 2018-06-25 09:59:39 · 13105 阅读 · 1 评论 -
jQuery实战_tab栏切换
jQuery实现tab栏切换 HTML结构： CSS： active 用来显示下划线 selected 用来控制显示（默认都是隐藏的） JS：$(function(){ $("ul>li").mouseenter(function(){ //给li添加下横线 $(this).addClass('active').siblings(...原创 2018-06-25 10:05:46 · 12039 阅读 · 6 评论 -
jQuery实战_360导航效果（节点操作练习）
HTML结构： 我们想要的效果： 鼠标移上去的时候，会显示出一个”百度一下，你就知道”的提示框 可以直接写在原html中，为了练习jQuery的节点操作，我们动态生成。 JS： 效果图： 移上去的时候： 注意点：   在使用链式链接后，当用了children(‘div’)，那么后面的操作都是对div操作，如果想回到对父元素的操作，必须用pa...原创 2018-06-25 10:10:24 · 297 阅读 · 0 评论 -
jQuery实战_固定导航栏
HTML结构： JS： 效果： 注意点：1.向下滚动别忘了给向上滚动做还原2.给浏览器监听滚动事件 $(window).scroll(function(){});3.给文本监听滚动事件 $(document).scrollTop();...原创 2018-06-25 10:13:09 · 1163 阅读 · 0 评论 -
jQuery实战_两侧跟随广告
要实现的效果：滑动滚动条，广告位置看上去不变。 HTML： CSS： JS: 效果： tips： 获取文本的滚动高度，给广告加上滚动的高度原创 2018-06-25 10:15:36 · 860 阅读 · 0 评论 -
jQuery_详细介绍
jQuery 有两个标识符一个是“$”,另一个是“jQuery”,两者相同。eg：$(document).ready(function(){ var $ = '我是 $符号" $('XX').click(fuctio(){})})会报错，原因是我们定义的符号会覆盖jQuery的符号会覆盖jQuery的符号会覆盖jQuery的符号eg：$(doc...原创 2018-06-24 13:35:06 · 459 阅读 · 0 评论 -
JQuery_入门
jQuery把我们常用的功能封装了，方便我们使用。jquery的重点： 1.想要使用jQuery，我们要先引进来jQuery的文件<script src="juqery.mim.js"></script>2.jQuery的入口函数两种：(1): $(document).ready(function{原创 2018-06-24 13:27:41 · 178 阅读 · 0 评论 -
jQuery_解绑事件
一.解绑事件 如果用bind绑定事件，解绑要用unbind如果用delegate绑定事件，解绑要用undelegate如果用on绑定事件，解绑要用off要一一对应eg：//on 绑定事件 $('ul').on('click','li',function(){ alert($(this).html()) }); //解绑事件，off的参...原创 2018-06-26 10:27:39 · 1641 阅读 · 0 评论 -
jQuery_触发事件
1.click：$('div').click()2.trigger:触发事件，并且触发浏览器默认行为$('form').on('click','#btnSub',function(){ var txtName = $('#txtName').val(); if(txtName === '1'){ alert('提交成功') }else{ $('#txtNa...原创 2018-06-26 10:34:21 · 176 阅读 · 0 评论 -
jQuery_事件对象
在浏览器客户端应用平台，基本上都是以事件驱动的，即某个事件发生，然后做出相应的动作。 浏览器的事件表示的是某些事情发生的信号。 一.什么是事件对象？$('#btn').click(function(e){ console.log(e);})结果： 我们可以看到这个事件对象的一切信息event对象简介 eg：$('button').one('click','w...原创 2018-06-26 11:15:24 · 150 阅读 · 0 评论 -
jQuery_鼠标跟随效果
鼠标跟随效果： HTML：<body><img src="images/ts.gif" alt=""></body>JS： $(function(){ $(document).on('mousemove',function(e){ $('img').css({ 'position':'...原创 2018-06-26 11:31:21 · 221 阅读 · 0 评论 -
jQuery_其他补充
1.链式编程 end()补充当执行的jQuery链式编程断掉的时候，如果能把链在链上就好了 end() 结束当前的链式编程的链，回到最原始的链上去时2.隐式迭代 在默认情况下，会自动迭代执行jQuery选择出来的所有的dom元素操作 如果获取的是多元素的值，默认返回的是第一个元素的值eg：$('ul li').text('你好！') 会默认给选择出ul下的所有的li 设置te...原创 2018-06-26 14:03:47 · 142 阅读 · 0 评论 -
jQuery实战_防淘宝评论五角星
淘宝评论的小星星，移上去可以星星变成实心的，完全防淘宝来实现一个五角星的例子 思路：第一步：当鼠标移到某个li标签上，该li以及它前面的li变成实心的，后面的不变第二部：记录一下用户点击的是哪一个五角星，给点击的li标签再添加一个样式类第三部：当鼠标移开评分控件的时候，如果没有clicked,即没有点击任何星星，在离开的时候所有的星星变为空心如果有clicked,把clicked...原创 2018-06-26 13:46:32 · 272 阅读 · 0 评论 -
jQuery_做jQuery插件
要学会做自己的jQuery插件一.全局jQuery函数扩展方法$.log = function(){}方法是：$.方法名 = function(){} //给全局对象扩展一个全局函数 $.ww = function(){ console.log("雯雯") };//使用： $.ww();效果： 二.普通的jQuery...原创 2018-06-26 13:52:08 · 160 阅读 · 0 评论 -
jQuery_引入第三方插件
前端库插件的说明文档都是.md结尾的文件（Markdown） 如何动态的去安装第三方的包呢？ 借助包管理工具 bower、npm,自动加载第三方插件 一.背景色动画插件 animate()不支持backgroundcolor属性插件jquery.color.js会让背景色渐变 <!--第一步，引入jQuery插件--> <!--第二步，引入j...原创 2018-06-26 14:56:17 · 5077 阅读 · 0 评论 -
jQuery_json创建表格
解析json动态生成表格HTML结构： <table> <thead> <tr> <td>学生</td> <td>学号</td> <td>成绩</td>原创 2018-06-26 15:24:35 · 728 阅读 · 0 评论 -
jQuery_省市选择
省市选择：HTML结构：&lt;select name="provice" id="provice"&gt;&lt;/select&gt;&lt;select name="city" id="city"&gt;&lt;/select&am原创 2018-06-27 09:39:37 · 619 阅读 · 0 评论 -
jQuery_微博案例
微博案例：当点击表情的时候，会显示出表情包，点击表情包，会在文本域显示出对应的表情文本HTML：&lt;div class="box"&gt; &lt;p&gt;发表一下你的心情吧&lt;/p&gt; &lt;textarea name="" id="" cols原创 2018-06-27 09:39:08 · 494 阅读 · 0 评论 -
jQuery_城市选择
想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中 HTML结构：&lt;div class="main"&gt; &lt;select name="sel_city" id="sel_city" multiple&gt; &lt;option value="1&原创 2018-06-27 09:37:28 · 1027 阅读 · 0 评论 -
jQuery_原生JS局限性
原生JS还是有一定的局限性1.事件覆盖比如说：window.onload = function(）{}一个页面只能有一个，再写一个window,onload会覆盖掉原先的。2.获取不存在元素会报错获取不存在的元素会报错，代码的容错性很差3.浏览器兼容问题例如：innerText在火狐浏览器没有用4.原生的代码量比较大对获取元素操作元素比较麻烦，例如Aja...原创 2018-06-24 13:16:26 · 213 阅读 · 0 评论 -
jQuery事件
JQuery事件： 查看jQuery的API文档，可以看到jQuery的事件有： 常用事件：blur:失去焦点触发 change：改变，下拉框改变值的时候触发的事件 click :点击触发的事件 dbclick:双击触发的事件 error：错误，用法：假如一个网站图片特多，用户的网速不好加载不出来，显示一个X号，这时在图片加载失败的时候调用error这个事件，给它一个网站默认的...原创 2018-06-25 10:18:44 · 147 阅读 · 0 评论