JQuery

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30480583

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/crazytao/p/7383066.html

JQuery

　　　文档：http://jquery.cuishifeng.cn/

　　　1.x；2.x；3.x；推荐1.12，兼容性更高

　　　分为js和js.min , min是压缩版的，上线时使用min

　　　模块（类库）

　　　DOM/BOM/JavaScript的类库

　　　在头文件加入：

　　　但是一般放在尾部。

　　　调用jQuery：

　　　　　　1、jQuery.方法名

　　　　　　2、$.方法名

　　一、查询元素

　　　　　　相互转换：

　　　　　　　　jquery对象[0] =>Dom对象

　　　　　　　　　　$('#i1')[0] = document.getElmentById('i1')

　　　　　　　　Dom对象 => $(Dom对象)

　　　　　　选择器-直接找到某个或者某类标签

　　　　　　　　1、id

　　　　　　　　　　　　$('#id')

　　　　　　　　2、class　

　　　　　　　　　　　　$('.c1')

　　　　　　　　3、标签

　　　　　　　　　　　　$('a') -找到所有a标签

　　　　　　　　4、组合

　　　　　　　　　　　　$('a,.c2.#i1')

　　　　　　　　5、层级

　　　　　　　　　　$('#i10 a') -id = i10 下所有的a标签，子子孙孙

　　　　　　　　　　$('#i10>a')　　　-只找儿子

　　　　　　　　6、属性

　　　　　　　　　　$('[属性名]')

　　　　　　　　　　$('[属性名="属性内容"]')

　　　　　　　　　　$('input[type="text"]') = 　$(':text')

　　　　　　筛选

　　　　　　　　$('a:first')

　　　　　　　　$('a:eq(0)')　　-索引（从0开始)

　　　　　　三元运算

　　　　　　　　var v = 条件? 真值：假值

　　　　　　$(this).next()　　下一个

　　　　　　$(this).prev()　　上一个

　　　　　　$(this).parent()　　父

　　　　　　$(this).children()　　孩子

　　　　　　$(this).sibling()　　兄弟

　　　　　　$(this).find(‘#i1’) 　　子子孙孙里查找

　　　　　　$(‘#i1’).addClass(‘hide’)　　　添加class

　　　　　　$(‘#i1’).removeClass(‘hide’)　　删除

　　　　　　支持链式编程

　　　　　　绑定事件

　　　　　　　　$(,content).click(function(){})

　　二、操作元素

　　　　1.文本操作

　　　　　　　　$(..).text() 　　#获取文本内容

　　　　　　　　$(..).text("...") 　　　#设置文本内容

　　　　2.属性操作

　　　　　　　　$(..).val()　　　　#获取value值

　　　　　　　　$(..).val("...")　　　　#设置value值

　　　　　　　　#对自定义属性的操作

　　　　　　　　$(..).attr('type')　　　#获取type属性的值

　　　　　　　　$(..).attr('type'，'password')　　　#设置type属性的值

　　　　　　　　$(..).removeAttr('type')　　　#删除type属性

　　　　　　　　#专门用于checkbox，radio操作

　　　　　　　　$(..).prop('checked',true)　　　#选中，false 不选中

　　　　3.样式操作

　　　　　　　　$(..).addClass()

　　　　　　　　$(..).removeClass()

　　　　　　　　$(..).hasClass()

　　　　　　　　$(..).toggleClass()　　　　#有则去除，没有则添加

　　　　　　　　单个样式

　　　　　　　　$(..).css('样式名','样式值')

　　　　　　　　　　-点赞

　　　　　　　　　　　　　　-$(..).append()

　　　　　　　　　　　　　　-setInterval

　　　　　　　　　　　　　　-透明度

　　　　　　　　　　　　　　-position

　　　　　　　　　　　　　　-字体大小，位置

　　　　　　　　位置：

　　　　　　　　　　　　$(windows).scrollTop() 　　获取滚轮位置

　　　　　　　　　　　　$(windows).scrollTop(88)　　设置滚轮位置

　　　　　　　　　　　　scrollLeft()　　　　左右滚轮

　　　　　　　　　　　　offset()　　　获取指定标签的位置

　　　　　　　　　　　　position()　　获取指定标签相对于父标签（relative）标签的坐标

　　　　　　　　　　　　$('i1').height() 　　#　　获取标签的纯高度

　　　　　　　　　　　　$('i1').innerHeight() 　　#　　获取标签的边框+纯高度

　　　　　　　　　　　　$('i1').outerHeight() 　　#　　获取标签的

　　　　　　　　　　　　$('i1').outerHeight(ture) 　　#　　获取标签的

　　　　　　　　　　　　#纯高度，边框，外边距，内边距

　　　　　　　　绑定事件：

　　　　　　　　　　Dom：三种绑定方式

　　　　　　　　　　jquery：$('.c1').click(function(){})

　　　　　　　　　　　　　　$('.c1').bind('click',function(){})　　　　//unbind

　　　　　　　　　　　　　　*******

　　　　　　　　　　　　　　$('.c1').delegate('a','click',function(){})　　　　//undelegate

　　　　　　　　　　　　　　　　　　-委托，当点击时绑定

　　　　　　　　　　　　　　$('.c1').on('click',function())　　　　//off

　　　　　　　　　　　　　　阻止后面事件的发生，（表单提交）

　　　　　　　　　　　　　　function clickOn(){

　　　　　　　　　　　　　　　　　　alert(123);

　　　　　　　　　　　　　　　　　　return false;

　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　# 当页面框架加载完毕之后自动执行。

　　　　　　　　　　　　　　$(function(){

　　　　　　　　　　　　　　　　　　$()....

　　　　　　　　　　　　　　　　　　...

　　　　　　　　　　　　　　　　　　})

　　　　　　jQuery扩展

　　　　　　　　$('#i1').css() 　　选择器的方式

　　　　　　　　$.ajax()　　　　自带的方法

　　　　　　　　$.extend({　　　　　　//扩展一个abc方法

　　　　　　　　　　　　'abc'：function(){

　　　　　　　　　　　　　　return 'sb'}

　　　　　　　　　　　　})

　　　　　　　　　　　　调用： $.abc()

　　　　　　　　$.fn.extend.({　　　　　　//扩展一个abc方法

　　　　　　　　　　　　'abc'：function(){

　　　　　　　　　　　　　　return 'sb'}

　　　　　　　　　　　　})

　　　　　　　　　　　　调用： $('#i1').abc()

　　　　　　　　用自执行函数解决封装函数的全局变量冲突的问题

　　　　　　　　(function(){

　　　　　　　　　　　　var staturs = 1 ;

　　　　　　　　　　　　//封装变量　　

　　　　　　　　　　　　})(jQuery)

----->实例：

　　　　　　1、多选，反选，全选

　　　　　　　　-选择器

　　　　　　　　　　$('#tb:checkbox').prop('checked');　　　　获取值

　　　　　　　　　　$('#tb:checkbox').prop('checked',ture);　　　　设置值

　　　　　　　　　　jQuery方法内置循环：$('#tb:checkbox').方法

　　　　　　　　　　$('#tb:checkbox')each(function(k){

　　　　　　　　　　　　　　　　//k 当前索引

　　　　　　　　　　　　　　　　//this， Dom，当前循环对象

　　　　　　　　　　　　　　　　})　　

　　　　　　2、菜单切换

　　　　　　　　　　样式中，加入一个cursor:pointer ：出现小手

　　　　　　3、点赞

　　　　　　　　　　var tag = document.createElement('span')　　创建span

　　　　　　　　　　fontSize = '15'

　　　　　　　　　　$(tag).text(‘+1’)

　　　　　　　　　　$(tag).css('color','green')

　　　　　　　　　　$(tag).css('fontSize',fontSize+'px')

　　　　　　　　　　$().apend(tag)

　　　　　　　　　　var obj = setInterval(function(){

　　　　　　　　　　　　　　fontSize = fontSize+5

　　　　　　　　　　　　　　top = top -5

　　　　　　　　　　　　　　right = right -5

　　　　　　　　　　　　　　opacity =opacity - 0.2;

　　　　　　　　　　　　　　$(tag).css('fontSize',fontSize+'px')

　　　　　　　　　　　　　　...

　　　　　　　　　　　　　　$(tag).css('opacity',opacity)

　　　　　　　　　　　　　　if(opacity < 0){

　　　　　　　　　　　　　　　　　　clearInterval(obj);

　　　　　　　　　　　　　　　　　　$(tag).remover() }

　　　　　　　　　　　　　　　　},100)

　　　　　　　　4、表单提交

转载于:https://www.cnblogs.com/crazytao/p/7383066.html