怎样用jquery改变标签?

怎样用jquery改变标签?,第1张

jquery可以通过修改标签属性来改变它的样式;
js设置和获取标签的属性 :
代码如下:
<script type="text/javascript">
windowonload = function () {
var attr = documentgetElementById("attr");
attrsetAttribute("style", "font-weight:bold;")
alert(attrgetAttribute("style"));
}
</script>
jq设置和获取标签的属性 :
<script src="IP/Scripts/jquery/jquery-142minjs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#attr")attr("style", "color:#ff0000");//单个属性的设置
$("#Avatar")attr({ "class": "banner", "alt": "头像", "src": "IP/avatar/a118538jpgid=11133319" });//多个属性的设置
alert($("#Avatar")attr("src")); //得到指定标签的属性
});
</script>

方法如下:
var caption_value = $('#caption')val();
var ajax_url = '/design_templates/edit_design_namecheck_ajaxphp' + caption_value;
$("#caption")autocomplete({
source: ajax_url,
focus: function (event, ui) {
//$('#caption')val(uiitemv);
return false;
},
select: function(event, ui) {
//$('#caption')val(uiitemv);
return false;
}
})
data( "autocomplete" )_renderItem = function( ul, item ) {
return $( "<li></li>" )
data( "itemautocomplete", item )
append( "<a style='color:" + itemcolor + "'>" + itemv + "(" + itemdesc + ")" + itemstar + "</a>" )
appendTo( ul );
};
这里使用了一个方法,就是在li元素中插入<a>元素,其他的元素,比如span,似乎都不可以,可能是因为a这个是link元素,可以支持点击,或者
autocomplete中原生支持。这个data()的方法,指明了是autocomplete元素,_renderItem()是指渲染每条数据,是指用户返回的数据,我需要进行加工处理,其中ul是整个下拉框,其中的每条数据是一个li元素。
其中li元素中进行了<a>元素的填充。这里的item是返回的数组元素的某一条数据。
在PHP中是这样处理的:
<php
setTemplate('none');
$DB = Database::connect();
$returnArr = array();
if (isset($_GET['term'])) {

$sql = "SELECT dcaption, ddesign_state_id, ccaption AS cat_caption, csite_id FROM designs d
JOIN avq_categories c ON dcategory_id = cid
WHERE dcaption LIKE "mysql_quote_smart($_GET['term'] '%')" ORDER BY csite_id, dcaption ASC LIMIT 10";
//echo $sql;exit;
$res = $DB->query($sql);
$row = mysql_fetch_assoc($res);
// echo '<pre style="text-align: left;">'; print_r($row); echo '</pre>';
do {
$removed = '';
$coloring = '';
if ($row['site_id'] == 1) $coloring = '#278c16';
if ($row['site_id'] == 2) $coloring = '#176c8c';
if ($row['site_id'] == 3) $coloring = '#5f1719';
if ($row['design_state_id'] == 3) $removed = ' ';
if ($row['design_state_id'] == 2) $removed = ' ';
if ($row['cat_caption'] != '') {
//$returnString = '<span style="color:'$coloring';">' $row['caption'] ' (' $row['cat_caption']')' $removed'</span>';
//$returnString = $row['caption'] "(" $row['cat_caption'] ")" $removed;
$returnString = array('color'=> $coloring, 'v'=>$row['caption'], "desc" => $row['cat_caption'], "star"=>$removed);
array_push($returnArr, $returnString);
}
} while ($row = mysql_fetch_array($res));
//print $returnString;
echo json_encode($returnArr);
}
>
直接通过mysql查询返回的。记住需要是json格式的数组。
有不正确的地方,敬请留言。

jquery中$()的功能很强大,
不过我们一般需要的就是根据id值获取对应的元素对象,
可以这样来实现:
my$
=
function(s)
{
return
documentgetelementbyid(s);
}
当然,
可以在函数内针对不同的情况进行再处理
或则,
可以把jquery的源代码下载下来研究研究,
你会有收获的

方法一:
你先使用jquery移除掉以前的i标签,然后再次after,应该就可以了
//先创建i标签
var txt1 = "<i></i>";
//删除以前已经存在的i标签
$("div1")find("i")remove();
//追加现在的i标签
$("div1")find("input")after(txt1);
方法二:
你先在input后面写死一个i标签,然后控制起影藏,当点击按钮的时候,给这个i标签添加text(),然后控制其显示就可以了

// 设置样本数量
var sampleCount = 1e4;
// 在页面里插入样本
for (var i = 0; i < sampleCount; i += 1) {
    $('body')append('<input type="text" class="test-tagsinput" />');
}
// 获取测试开始时间
consolelog('测试开始');
var start = (new Date())getTime();
// 初始化
$('test-tagsinput')tagsinput();
// 完成,记录结束时间
var end = (new Date())getTime();
consolelog('测试结束');
var offset = end - start;
consolelog('测试总用时:' + offset + 'ms');
consolelog('每个标签的初始化生成时间为' + offset / sampleCount + 'ms');

可以通过事件代理方式加载事件,比如你的父容器是ul,ul下面的li是动态生成的,绑定点击事件可以这样写:

$('ul')on('click','li',function(){//code here});


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13338618.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-17
下一篇 2023-07-17

发表评论

登录后才能评论

评论列表(0条)

保存