- 利用jQuery实现图片放大镜-功能 11-25
- jQuery的 实例 11-25
- JQuery初学三笔记 11-25
- jQuery实现分页插件 11-25
- jQuery 遍历- 过滤 11-25
- Jquery入门 11-25
- 技术|善待jQuery 11-25
- JQuery初学一笔记 11-25
- jQuery 效果 方法 11-25
- Jquery中选择器用法解释 11-25
利用jQuery实现图片放大镜-功能
发布者: superzhang | 发布时间:2017-11-25其展示的放大效果:
放大效果
jQuery核心代码:
<script>
$(function() {
$("img").bind("mousemove", function() {
var x = event.offsetX / $(this).width();
var y = event.offsetY / $(this).height();
$("span").scrollLeft($("#img2").width() * x);
$("span").scrollTop($("#img2").height() * y);
})
})
</script>
HTML 代码:
<img id="img1" src="img/pic.jpg" width="200px"&
jQuery的 实例
发布者: superzhang | 发布时间:2017-11-25你想增进 jQuery 技能吗?
jQuery 选择器
$(this).hide()
演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。
jQuery 事件
jQuery click()
演示 jQuery jQuery click() 事件.
jQuery dblclick()
演示 jQuery dblclick() 事件。
jQuery mouseenter()
JQuery初学三笔记
发布者: superzhang | 发布时间:2017-11-25$("P").click(function()
{
$(this).slideUp(); // SlideUP函数向上滑动隐藏、SlideDown函数向下滑动隐藏、SlideToggle交换隐藏与显示,this不是代表整个页面,而是代表P标签。
}
);
$("button").click(function(){ //点击按钮触发
$("li").toggle("slow"); //交换隐藏与显示,除了slow选项还有fast,甚至可以直接输入数值(以毫秒为单位),例如:toggle(6000)
});
//除了toggle()函数,还有show()、hide()函数、fadeIn()淡入、fadeOut()淡出、fadeTo()可指定数值,数值代表透明度、animate()、stop()、start()、accordion()、draggable()、selectable()、resizable()
jQuery实现分页插件
发布者: superzhang | 发布时间:2017-11-25js:
(function($) {
$.fn.motypagination = function(options, cur, total) {
var _this = this;
var defaults = {
color: "#787d82",
disabled_color: "#c8cdd2",
hover_color: "#ec1500",
cur_bgcolor: "#ec1500",
cur_color: "#fff",
hidewhenonlyone: true,
horizontal: true,
first: true,
last: true,
prev: true,
next: true,
first_text: "首页",
last_text: "尾页",
prev_text: "上一页",
next_text: "下一页",
pages_shown: 7,
url: function(index){
return "index_" + index;
}
};
var
jQuery 遍历- 过滤
发布者: superzhang | 发布时间:2017-11-25缩小搜索元素的范围
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
jQuery first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素:
实例
$(document).ready(function(){ $("div p").first();});
jQuery last() 方法
l
Jquery入门
发布者: superzhang | 发布时间:2017-11-25jquery
[] jquery概念
jquery是JS的框架。
JS的函数库。
【】BOM
BOM:Browser Object Model
BOM对象:
1.window:BOM根对象
2.window.navigator 浏览器对象
3.window.location : URL地址对象
4.window.document: 文档对象。
5.window.history 历史对象
【】DOM
DOM根对象:window.document 表示浏览器载入的文档在内存中模型。
DOM模式的格式:树。
每个标记表示一个对象,在树中是一个节点。
1. JS定位一个节点方法
(1)根据ID定位:var div=document.getElementById("id"); 返回一个对象
(2)根据标记名定义:var div=document.getElemenetByTagName("div");
返回对象的数组。
(3) 根据CSS选择器选择对象:
var ob=document.querySelector("css选择器")
技术|善待jQuery
发布者: superzhang | 发布时间:2017-11-25先做一个小调查,大家多久没用过了?
本周jQuery更新到了3.2.0,移除了很多过时的API,网路上也发起了《You dont need jQuery》 活动,收集了很多可以用原生API替代jQuery的API,有趣的是,今天遇见了一个非常蛋疼的问题,又不得不引入了jQuery。
这个问题是:在移动端的WebView中如何使用脚本的方式让键盘弹起来。
第一印象里处理这个问题就想到了fcous事件,让input输入框自动获得焦点,模拟一次点击来弹出键盘,不过遗憾的是,这个事情没有解决。当我想去自动触发一次fcous事件时,我才发现Vue2.0很难处理这个,做了一个假的(div仿造的输入框),点击时用v-model绑了一个布尔值,来控制显示隐藏,真实的输入框,但是Vue没法处理脚本行为(不是人为的去点击输入框来调起键盘)。
然后我想到了另外一个方式,使用createEvent的方式去dispatch click,这样可以保证不引入其他库的情况下来处理它,后来我发现安卓上有一些问题,倒是可以弹出键盘来了,但是iOS上没用。
搜啊搜,在 UIWebView上搜到了一行:
When this property is set to true, the user must explicitly tap the ele
JQuery初学一笔记
发布者: superzhang | 发布时间:2017-11-25$("document").ready(funtcion()
{
$("P").css("border","3px solid"); //代表P标签的CSS样式。
$("P:first").css("border","3px solid"); //代表第一个P标签的CSS样式。
$("P:even").css("border","3px solid"); //代表第偶数个P标签的CSS样式,需要注意的是,第一P标签并为奇数,因为P标签的统计数按数组统计的,数组的索引值是从0开始的,并非从1开始,因此第一个标签算是偶数。
$("P:odd").css("border","3px solid"); //代表第奇数个P标签的CSS样式。
$("P:gt(1)").css("border","3px solid"); //代表大于1的P标签的CSS样式。
$("P:eq(1)").css("border","3px solid"); //代表索引值为1的P标签的CSS样式。
$("P,li.b").css("border","3px solid"); //P后面的逗号代表P和li两个标签都要设置其CSS样式,注意li.b是代表li的class属性为b的标签。例如: <li c
jQuery 效果 方法
发布者: superzhang | 发布时间:2017-11-25下面的表格列出了所有用于创建动画效果的 jQuery 方法。
Jquery中选择器用法解释
发布者: superzhang | 发布时间:2017-11-25主要介绍了Jquery中CSS选择器用法,实例分析了jQuery中常用的5种css选择器的使用技巧,需要的朋友可以参考下。
jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下:
一. 标签选择器
用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName
二. ID选择器
用于获取某个具有id属性的元素,格式如下:$("id"),同getElementById
三. 类选择器
用于获取某个具有class属性的元素,格式:$("class")
