jQuery进阶使用

简介: jQuery进阶使用

1、操作属性

  • 1.attr():获取某个标签属性的值,或设置某个标签属性的值
$("input[name=hobby]").attr("value", "篮球")
  • 2.removeAttr():删除某个标签属性
$("#ab").removeClass("bb")
  • 3.addClass():给某个标签添加class属性值
$("#mydiva").addClass("myclass")
  • 4.removeClass():删除某个标签class属性值
$("input[name=hobby]").removeAttr("value")
  • 5.prop():和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选
$("input[name=hobby]").prop("checked",true)

2、操作样式

  • 获取样式 Jquery对象.css(“样式名”) 所有的样式都可以获取
  • 设置样式 Jquery对象.css(“属性名”,“属性值”) 单个设置
  • 设置样式 Jquery对象.css({属性名:属性值,属性名:属性值…}) 批量设置
  • 注意1:如果属性名带引号 样式名可以和css一样
  • 注意2:如果属性名不带引号 样式名要用驼峰命名
  • 注意3:属性值是字符串形式 但是可以省略px 写成数字形式
  • 注意4:可以使用累加

  案例:

 一个属性的设置
$("#myid").css("color","red")
多个属性 
$("#myid").css({"background-color":"aqua","color":"red"})
类选择器
$(".aa").css("color","red")
元素选择器
$("li").css("color","red")
通配符选择器
$("*").css("background-color","red")
组合选择器
$(".aa , div").css("color","red")
后代选择器
$("#myid li").css("color","red")
子代选择器
$("#myid>li").css("color","red")
过滤选择器
获取第一个li标签
$("#myid>li:first").css("color","red")
最后一个
$("#myid>li:last").css("color","red")
eq(index)  根据标签的下标获取
$("#myid>li:eq(3)").css("color","red")
even 获取偶数下标的标签
$("#myid li:even").css("color",'red')
odd 获取奇数下标的标签
$("#myid li:odd").css("color","red")

3、each循环

  • each 写法1 $(选择器/循环体).each(function(index,item){})
  • each 写法2 $.each(循环,function(index,item){})
被选中的复选框的vlaue值
$("input:checkbox:checked").each(function(){
console.log($(this).val())
})

4、操作内容

  • 1.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
 console.log($("#mydiva").html())
 $("#mydiva").html("<h1>前随疾风前行</h1>")
  • 2.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
console.log($("#mydiva").text())
$("#mydiva").text("断剑重铸之日,骑士归来之时")
  • 3.val():主要用户获取/设置输入框的值
$("input[name=hobby]").val("篮球")
console.log($("input[name=hobby]").val())

       

       


相关文章
|
JSON 前端开发 JavaScript
jQuery进阶
在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。
|
JavaScript
沫沫金 - 实战总结jQuery进阶技巧图册
zly:多个parent使用parents代替 2016-01-04 17:11 关键词:parents $tr = $('td').parent().parent()... 替换 $tr = $('td').parents('tr'); 警!    注意 s 的使用。
753 0
|
JavaScript 前端开发
jQuery插件库代码分享 - 进阶者系列 - 学习者系列文章
这些天将原来在网上找的jQuery插件进行了下整理,特此将代码分享出来给大家。 见下图结构。     对目录结构进行了分类。这里是插件列表。   这里总共收集了20来个插件。还有下面未进行划分的。
899 0
|
JavaScript 前端开发 测试技术
编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章
这些年主要关注于项目管理方面的工作,编码就比较少了。这几天比较空闲,就想把原来的经验沉淀下来,一个是做好记录,以后如果忘记了还能尽快找回来,第二个是写写博文,算是练练手笔吧。       言归正传,这次写的是Javascript类库。
888 0
|
JSON 前端开发 JavaScript
jQuery基础---Ajax进阶
原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处!   在 Ajax 基础一篇中,我们了解了最基本的异步处理方式。
1069 0
|
11天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
52 21
|
12天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
43 16
|
7天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
31 9
|
10天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
12天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。