利用jQuery实现图片放大镜-功能

其展示的放大效果：

放大效果

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的 实例

你想增进 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初学三笔记

$("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实现分页插件

js:

(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 遍历- 过滤

缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

jQuery first() 方法

first() 方法返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

实例

$(document).ready(function(){ $("div p").first();});

jQuery last() 方法

l

想读更多 ->

Jquery入门

jquery

[] 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

先做一个小调查，大家多久没用过了？

本周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初学一笔记

$("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的标签。例如： ＜ｌｉ　ｃ

想读更多 ->

jQuery 效果 方法

下面的表格列出了所有用于创建动画效果的 jQuery 方法。

想读更多 ->

Jquery中选择器用法解释

主要介绍了Jquery中CSS选择器用法,实例分析了jQuery中常用的5种css选择器的使用技巧,需要的朋友可以参考下。

jQuery使用了一套css选择器，共有5种，即标签选择器，ID选择器，类选择器，通用选择器和群组选择器，现分述如下：

一. 标签选择器

用于选择HTML页面中已有的标签元素，又称元素选择器，格式：$("element")，如$("div"),同getElementByTagName

二. ID选择器

用于获取某个具有id属性的元素，格式如下：$("id")，同getElementById

三. 类选择器

用于获取某个具有class属性的元素，格式:$("class")

想读更多 ->