jQuery语法
2015-06-27 21:01
495 查看
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
使用变量时一定要用上+字符串连接号。
选择标签a中所有显示值中包含文本“添加”的元素。
选出所有
当需要添加的元素只有一个时,选择所有包含“添加”文本的元素。
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例1
$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
$(document).ready(function(){ --- jQuery functions go here ---- });
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
jQuery 选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
利用变量选择多种情况
$("#"+area_id); 其中area_id为一变量,通过传入函数的参数area_id值的不同,可以选择不同的元素。使用变量时一定要用上+字符串连接号。
通过文本选择元素
var element=$("a:contains('添加')");选择标签a中所有显示值中包含文本“添加”的元素。
选出所有
jQuery 选择器的属性
以此标签做为例子<td><a href="###" id="6" onclick="add_ip(6);return false;">添加</a></td> <script> var element = $("#6"); </script>
长度属性 $(selector).length
if (($("a:contains('添加')").length - $("a:contains('已添加')").length) == 2) { var element = $("a:contains('添加')"); } else { var element = $("#"+area_id); }
当需要添加的元素只有一个时,选择所有包含“添加”文本的元素。
删除元素的属性
element.removeAttr("onclick"); element.removeAttr("href");
改变元素的样式
element.css("text-decoration","none"); //去掉文字的下画线 element.css("color","grey"); //改变字体颜色
获取元素的样式的值进行判断
if ($(this).css("display") == "table-row" ) { $(this).css("display","none") }
改变元素的显示值
element.text("已添加");
替换元素的标签
element.replaceWith("<label style=\"color:grey;\">已添加</label>"); //更改之后元素变为<label>标签 <label style="color:grey;">已添加</label>
定位元素的父节点和兄弟节点
var element_prev = element.parent().prev(); //这里<a>的父节点是<td>标签,而<td>标签的前一个节点是前一个<td>标签
相关文章推荐
- 15个最佳jQuery的翻页书效果的例子
- jQuery.form 上传文件
- jquery验证后ajax提交,返回消息如何统一显示的问题
- CSS/JQuery元素选择器之&&和||,选择器的逻辑操作
- jQuery学习(选择器)
- jquery中checkbox选中的问题之prop&attr惹的祸
- jquery ajax调用服务器端指定的函数的三种方式
- 前端开发学习随笔-------jquery.data()
- Jquery仿模态对话框插件Remodal
- 前端开发规范之jQuery编码规范
- jquery 的缺点
- jquery学习之 过滤选择器
- jQuery学习之-层次选择器
- jQuery入门:jQuery的ready事件
- JQuery插件ajaxFileUpload 异步上传文件
- 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。
- jquery学习之-普通选择器
- jquery修改/追加/删除html网页中的内容示例
- JQuery 的跨域方法 可跨任意网站
- jQuery.data() 存储数据